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内 容 提 要 


jQuery Mobile 是 以 全 球 最 流行 的 jQuery 为 核心 的 、 跨 平台 的 移动 Web 应 用 开发 框架 。 本 
书 着 眼 于 移动 Web 应 用 开发 实战 ， 从 应 用 结构 和 导航 开始 ， 分 门 别 类 地 介绍 了 jQuery Mobile 
为 开发 人 员 准 备 好 的 各 种 界面 部 件 ， 包 括 列表 视图 、 工 具 条 、 按 钮 、 表 单 、 网 格 布 局 等 ， 还 介 
绍 了 界面 主题 和 配色 ， 以 及 为 jQuery Mobile 编程 准备 的 事件 、 配 置 及 响应 式 布局 API。 本 书 最 
后 向 读 考 展示 了 一 个 完整 的 Web 应 用 开发 示例 。 

本 书 适合 所 有 对 开发 移动 Web 应 用 感 兴趣 的 读者 阅读 参考 。 
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如 果 你 是 一 名 Web 设计 师 或 开发 者 ， 并 且 正 在 考虑 使 用 jQuery Mobile 创建 移动 应 
用 ， 那 么 本 书 将 是 你 理想 的 伙伴 。 








jQuery Mobile 致力 于 解决 一 个 问题 : 为 市 场 上 众多 移动 平台 和 浏览 器 创建 兼容 
界面 。 








要 看 懂 本 书 ， 你 只 需要 了 解 基本 的 HTML (任何 版 本 ) 知识 ， 而 懂 一 些 基本 
的 JavaScript 则 将 对 理解 后 面 章节 的 内 容 非 常 有 帮助 。 读 者 不 需要 会 HTML5、 
JavaScript 或 jQuery 即 可 使 用 jQuery Mobile 框架 或 本 书 的 大 部 分 内 容 。 


本 书 排版 约定 


本 书 使 用 以 下 排版 约定 。 





楷体 

用 于 标识 新 术语 。 

等 宽 字 体 

用 于 显示 程序 ， 也 用 于 段落 中 的 代码 元 素 ， 如 变量 或 函数 名 、 数 据 库 、 数 据 类 
型 、 环 境 变量 、 话 名 以 及 关键 字 。 


等 宽 粗 体 
用 于 显示 那些 需要 用 户 原 样 输入 的 命令 或 文本 。 
等 宽 斜 体 
用 于 显示 需要 用 户 输 入 或 取决 于 上 下 文 的 文本 。 





XI 








as, 这 个 图 标 表示 提示 、 建 议 或 一 般 注解 。 








ED 这 个 图 标 表 示警 告 或 注意 。 
使 用 代码 


本 书 旨 在 帮助 你 完成 工作 。 一 般 来 说 ， 你 可 以 在 你 的 程序 及 文档 中 使 用 本 书 中 的 代 
码 。 除 非 你 准备 复制 大 块 的 代码 ， 否 则 无 需 从 我 们 这 儿 获 得 许可 。 例 如 ， 写 一 个 用 
到 几 段 本 书 中 代码 的 程序 时 不 需要 得 到 许可 ， 而 出 售 或 传播 O Reilly 书籍 中 示例 的 
光盘 (CD-ROM) 则 需要 许可 ， 引 用 本 书 内 容 或 书 中 的 示例 代码 回答 问题 无 需 得 到 
许可 ， 将 本 书 中 的 大 段 示例 代码 编 入 你 的 产品 文档 需要 得 到 许可 。 


我 们 赞赏 但 不 强求 注 明 信息 来 源 。 信 息 来 源 通常 包括 标题 、 作 者 、 出 版 商 以 及 国际 
标准 书号 (ISBN)。 如 :“ jQuery Mobile: Up and Running by Maximiliano Firtman 
(O'Reilly). Copyright 2012 Maximiliano Firtman, 978-1-449-39765-4." , 

















如 果 你 觉得 对 示例 代码 的 使 用 超出 了 正当 引用 或 上 面 给 出 的 许可 范围 ， 请 随时 通 
permissions@oreilly.com 联系 我 们 。 


Safar 在 线 图 书 


S far UU Safari 图 书 在 线 是 一 个 数字 图 书馆 ， 可 以 供 你 方便 快捷 








kis 7500 多 种 技术 和 创意 类 参考 书 以 及 视频 中 找到 需要 


Books ri. 信息 


订阅 之 后 ， 就 可 以 在 这 个 图 书馆 在 线 阅 读 、 查 看 所 有 图 书 及 视频 。 你 可 以 在 移动 设 
备 上 阅读 ， 在 新 主题 付 印 之 前 就 阅读 它们 ， 还 可 以 查看 编写 中 的 手稿 并 直接 给 作者 
反馈 、 复 制 粘贴 代码 、 管 理 收藏 、 下 载 章 节 、 给 关键 段落 加 书签 、 创 建 批注 、 打 印 
页 面 ， 以 及 获得 其 他 众多 节约 时 间 的 好 处 。 


O'Reilly Media 已 经 将 本 书 (英文 版 ) 上 传 至 Safari 图 书 在 线 。 要 获得 本 书 
及 其 他 来 自 OReilly 等 出 版 商 类 似 选 题 的 电子 版 完全 访问 权限 ， 请 到 http:// 
my.safaribooksonline.com 免费 注册 。 
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1005 Gravenstein Highway North 
Sebastopol, CA 95472 


中 国 : 
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http://shop.oreilly.com/product/0636920014607.do 

中 文书 : 
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关于 本 书 的 更 多 信息 、 会 议 、 资 源 中 心 和 网 络 ， 请 访问 以 下 网 站 : 
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第 1 章 


移动 平台 





如 果 你 正在 阅读 本 书 ， 说 明 你 可 能 是 一 位 网 页 设计 师 或 网 页 开发 者 ， 也 可 能 是 一 位 
jQuery 爱好 者 或 一 位 Web 应 用 开发 者 。 在 开始 写 代 码 之 前 ， 我 们 首先 要 了 解 一 下 移 
动 生态 系统 以 及 jQuery Mobile 适合 做 些 什 么 。 让 我 们 开始 吧 。 


1.1 为 什么 需要 jQuery Mobile 
你 可 能 会 问 的 第 一 个 问题 是 jQuery Mobile 存在 的 意义 是 什么 ?既然 已 经 有 大 量 能 
泻 染 标准 桌面 网 站 的 移动 浏览 器 了 ， 为 什么 还 要 专门 考虑 移动 设备 ? 


让 我 从 我 的 男 一 本 书 《 移 动 网 络 程序 设计 》(Programming the Mobile Web) 中 复制 
粘贴 一 些 内 容 来 回答 这 些 问 题 。 当 然 ， 我 已 经 从 自己 这 儿 得 到 授权 了 。 


1.1.1 移动 互联 网 的 传说 

随 着 人 们 访问 互联 网 的 方式 延伸 到 移动 终端 ， 开 发 者 中 间 也 流传 着 很 多 故事 ， 这 些 
故事 讲述 了 这 个 趋势 将 给 他 们 的 工作 带 来 什么 影响 。 虽 然 有 些 故 事 是 真实 准确 的 ， 
但 也 不 乏 带 来 误导 的 、 让 人 迷惑 的 ， 甚 至 是 极端 错误 的 描述 。 








1. 没有 所 谓 的 移动 互联 网 ， 只 有 一 个 互联 网 

过 去 的 几 年 里 我 曾经 多 次 听 说 这 个 言论 。 的 确 只 有 一 个 互联 网 ， 想 一 下 你 的 生活 吧 ， 
你 不 会 为 你 的 手机 专门 设置 另 一 个 Email 账号 。( 好 吧 ， 我 知道 有 些 人 会 这 样 做 ， 但 
我 相信 这 并 不 是 普遍 情况 。) 


在 最 喜欢 的 网 站 上 ， 比 如 在 ESPN 上 阅读 最 新 的 NBA 赛事 的 消息 ， 人 台式 机 和 手机 
访问 的 都 是 同一 个 新 闻 源 。 你 也 真 的 不 想 用 手机 访问 另 一 个 社交 网 络 ， 而 是 希望 使 
用 和 桌面 电脑 上 相同 的 Facebook 或 Twitter 账号 。 在 桌面 电脑 上 创建 朋友 列表 已 经 
很 痛苦 了 ， 你 已 经 因此 忽略 了 很 多 人 ， 你 可 不 想 把 这 些 事 在 手机 上 再 重 做 一 次 。 


因此 ， 只 有 一 个 互联 网 。 不 过 ， 在 为 移动 互联 网 做 开发 时 ， 我 们 面 对 的 是 非常 、 非 
常 不 一 样 的 设备 。 最 明显 的 不 同 是 屏幕 尺寸 ， 这 也 将 是 我 们 遇 到 的 第 一 个 问题 。 除 
此 之 外 ， 还 有 很 多 不 那么 明显 的 差异 ， 比 如 我 们 使 用 移动 设备 的 情境 ， 通 常 和 使 用 
舒适 的 桌面 电脑 甚至 笔记 本 、 上 网 本 时 的 地 点 、 场 景 完全 不 同 。 


不 要 误会 我 ， 这 不 是 说 ， 开 发 者 必须 为 我 们 的 工作 创建 两 个 、 三 个 或 多 个 版 本 。 这 
就 是 jQuery Mobile 要 解决 的 问题 。 








2. 设计 移动 网 站 不 需要 什么 特别 处 理 

今天 市 场 上 几乎 所 有 的 智能 手机 ， 如 iPhone 以 及 基于 Android 的 设备 ， 都 可 以 读 取 
并 显示 完整 的 桌面 站 点 ， 这 是 事实 。 用 户 和 希望 在 移动 互联 网 上 的 体检 和 在 桌面 电脑 
上 的 一 致 ， 这 也 是 事实 。 一 些 统计 甚至 显示 ， 用 户 使 用 智能 手机 时 ， 更 倾向 于 选择 
桌面 版 本 而 不 是 移动 版 本 。 不 过 ， 这 是 因为 我 们 喜欢 通过 缩放 、 滚 动 以 及 旋转 操作 
来 浏览 信息 呢 ， 还 是 因为 移动 版 本 的 用 户 体验 实在 太 差 了 ? 我 曾经 见 过 很 多 移动 互 
联网 网 站 ， 除 了 logo 和 若干 文本 链接 之 外 什么 也 没有 。 我 希望 在 智能 手机 上 看 到 更 
多 的 东西 ! 








3. 一 个 网 站 应 当 在 所 有 设备 (台式 机 、 手 机、 电视 ) 上 都 能 运转 

如 同 我 们 即将 看 到 的 ， 有 一 些 技术 能 让 我 们 只 创建 一 个 文件 就 能 为 包括 桌面 电脑 、 
手机 、 电 视 以 及 游戏 终端 在 内 的 众多 设备 提供 不 同 的 体验 ， 这 个 愿景 被 称 为 One 
Web。 今 天 ， 有 很 多 移动 设备 的 连接 速度 很 慢 ， 资 源 也 受 限 一 一 我 说 的 是 非 智 能 手 
机 ， 理 论 上 它们 也 能 读 取 并 解析 文件 ， 但 如 果 我 们 把 为 桌面 设备 准备 的 文档 发 给 
它们 ， 则 它们 非但 不 能 提供 最 好 的 体验 ， 还 可 能 产生 一 些 兼 容 性 问题 。 因 此 ，One 
Web 仍然 是 将 来 时 。 为 了 让 不 同 的 移动 设备 都 能 提供 恨 好 的 用 户 体验 ， 还 需要 做 一 
些 额外 工作 ， 不 过 也 有 一 些 技术 可 用 于 减少 这 些 工 作 并 避免 代码 和 数据 的 重复 。 














4. 只 要 创建 一 个 240 像 素 宽 的 HTML 文 件 ， 就 算是 一 个 移动 网 站 了 

这 是 另 一 种 关于 移动 互联 网 的 简单 化 认识 。 今 天 ， 市 场 上 有 3000 多 种 移动 设备 ， 差 
不 多 有 50 种 不 同 的 浏览 器 (事实 上 ， 如 果 我 们 按 它们 的 版 本 号 来 划分 的 话 ， 有 500 
多 种 不 同 的 浏览 器 )。 只 有 一 个 HTML 文件 的 移动 网 站 是 相当 不 靠 谱 的 。 另 外 ， 这 
种 做 法 ， 实 际 上 是 在 助长 移动 互联 网 毫 无 用 处 的 错误 观念 。 
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1.1.2. 移动 Web 应 用 

我 并 不 打算 讨论 移动 Web 开发 与 原生 开发 熟 优 熟 多 ， 事 实 上 ， 我 相信 这 个 讨论 本 身 
没有 多 大 意义 。 通 常 ， 这 些 讨论 的 焦点 就 是 对 比 原生 代码 与 JavaScript 代码 ， 或 训 
览 器 应 用 与 本 地 应 用 。 不 过 ， 这 些 讨 论 可 能 不 会 提 到 的 是 ， 对 原生 开发 环境 来 说 ， 
多 平台 开发 是 有 挑战 的 ， 因 为 每 个 平台 都 有 不 同 的 SDK。 既 然 问 题 的 核心 是 要 便利 
地 在 多 个 移动 设备 上 开发 及 发 布 ， 那么 移动 Web 开发 在 大 多 数 情况 下 都 是 一 个 完 
美的 解决 方案 。Web 应 用 有 着 大 量 的 同义词 或 近义词 ， 如 移动 Web 应 用 、 小 部 件 
(widget), WA (hybrid), HTMLS 应 用 等 。 

















特别 是 ,移动 Web 应 用 与 通常 的 移动 网 站 在 目标 上 并 不 相同 。 一 个 Web 应 用 通常 会 
模仿 原生 的 手机 应 用 ， 有 着 更 加 事务 型 的 用 户 界面 。 它 虽然 仍 是 由 网 页 技术 (HTML.、 
CSS, JavaScript, AJAX) 创建 的 ， 但 向 用 户 提供 了 一 个 类 似 应 用 程序 的 体验 。 


很 多 移动 Web 应 用 也 使 用 了 离线 或 地 理 定位 (geolocation) 等 HTMLS 特性 ， 以 便 
提供 更 好 的 体验 。 地 理 定位 不 是 HTML5 官方 标准 ， 而 是 W3C 的 一 个 独立 API, 不 
过 ， 它 经 常 以 HTML5 名 义 被 提 到 。 








Web 应 用 可 以 用 很 多 方式 〈 见 图 1-1) 实现 ， 包 括 : 


。 从 浏览 器 中 访问 ， 

。 安装 为 一 个 全 屏 的 Web 应 用 ， 

。 通过 提供 商 实现 的 官方 包 〈 有 时 叫 小 部 件 ) ZO 
。 内 和 藤 在 本 地 应 用 中 ， 通 常 称 为 聚合 。 
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图 1-1; Web 应 用 (从 左 到 右 ) : 基于 浏览 器 的 体验 、 安 装 的 全 屏 应 用 、 在 本 地 应 用 中 庶 入 
的 Web 应 用 








本 书 剩 下 的 部 分 将 介绍 如 何 创建 这 些 网 页 应 用 。 想 了 解 这 方面 的 更 多 信息 ， 可 以 
阅读 我 的 另 一 本 书 《移动 网 络 程序 设计 》。 

Web 应 用 通常 会 为 网 页 设计 师 和 开发 人 员 带 来 新 的 挑战 ， 比 如 加 载 视图 而 不 是 页 
面 ， 管 理 视图 之 间 的 双向 导航 ， 以 及 创建 为 触 屏 设备 定制 的 富 控件 等 。 





























1.1.3 再 问 一 次 ， 为 什么 需要 jQuery Mobile 

如 果 你 已 读 过 了 上 面 几 页 (我 相信 你 已 经 读 过 了 )， 就 会 知道 在 移动 互联 网 设计 及 开 
发 中 有 一 些 新 的 挑战 。 我 们 需要 创建 Web 应 用 ， 而 不 仅仅 是 简单 的 网 站 。 有 太 多 的 
设备 以 及 浏览 器 要 兼容 ， 同 时 ， 也 有 许多 由 社区 和 设备 提供 商 开 发 的 程序 库 党 试 解 
决 这 些 问 题 。 

这 就 是 jQuery Mobile 诞生 的 原因 : 让 设计 师 和 开发 者 使 用 少量 代码 即 可 更 容易 地 
创建 跨 平 台 、 可 定制 的 移动 互联 网 体验 。 

jQuery 世界 范围 的 广大 社区 也 将 为 这 个 框架 的 未 来 提供 大 量 机 会 。 


这 个 框架 同时 还 获得 了 移动 领域 许多 大 牌 公司 的 官方 赞助 和 支持 ， 其 中 包括 : 

















* Adobe; 

e Mozilla 公司 ; 

e HP Palm; 

。 BlackBerry/RIM ; 

* Nokia; 

DeviceAtlas 及 dotMobi., 


1.2 jQuery Mobile 是 什么 
根据 位 于 http://www.jquerymobile.com 的 官方 说 明 : 


jQuery Mobile 是 一 个 支持 所 有 流行 移动 设备 平台 的 统一 的 用 户 界面 系统 ， 基 于 
Teu ER jQuery 及 jQuery UI。 它 轻 量 级 的 代码 使 用 渐进 增强 方式 构建 ， 具 有 
可 伸缩 、 易 更 换 主 题 的 设计 特点 。 


1.2.1 jQuery Mobile 不 是 什么 
知道 jQuery Mobile 不 是 什么 ， 对 理解 jQuery Mobile 十 分 重要 。 





e jQuery Mobile 不 是 移动 浏览 器 上 的 jQuery, 
要 使 用 jQuery Mobile， 需 先 载 入 通常 的 jQuery 框架 。 或 者 说 ， 它 并 不 是 jQuery 
的 替代 ， 而 是 一 个 构建 于 jQuery 之 上 的 UI ER. 

















。 jQuery Mobile 不 是 Web 应 用 的 开发 包 。 
可 以 使 用 jQuery Mobile 来 创建 完整 的 移动 应 用 体验 ， 但 你 仍然 需要 一 些 额 外 的 
工作 来 将 它 编译 为 原生 应 用 。 在 后 面 几 音 中， 我 们 将 了 解 到 为 什么 要 这 样 做 ， 以 
及 具体 何 时 、 怎 样 来 做 。 





。 jQuery Mobile 不 是 专属 于 JavaScript 爱 好 者 的 框架 。 
除了 一 些 高 级 主题 ， 使 用 jQuery Mobile 时 一 般 无 需 涉及 任何 JavaScript 代码 。 对 
于 讨厌 大 括号 、 分 号 这 些 JavaScript 语法 的 Web 设计 师 而 言 ， 这 是 一 个 好 消息 。 


。 jQuery Mobile 不 是 面向 所 有 移动 应 用 /网 站 /游戏 的 解决 方案 。 
尽管 如 此 ，jQuery Mobile 可 以 为 它们 中 的 大 多 数 提供 解决 方案 。 至 于 剩 下 的 那 
些 ， 我 不 得 不 建议 你 去 阅读 我 写 的 另 一 本 相关 书籍 。 


1.2.2 ”框架 
如 果 你 没 听 说 过 jQuery， 那么 你 大 概 是 从 十 年 前 穿越 过 来 的 吧 ? 好 吧 ， 如 果 你 
是 Marty McFly ， 请 通过 浏览 器 访问 http://jquery.com， 了 解 一 下 这 个 超级 有 用 
的 JavaScript 框架 。 事 实 上 ， 自 2007 年 开始 ， 它 就 是 互联 网 上 使 用 最 为 广泛 的 
JavaScript 框架 了 。 


jQuery Mobile 是 一 个 帮助 开发 者 更 容易 地 在 移动 设备 和 平板 电脑 上 (这 些 设备 大 多 
具备 触摸 操作 功能 ) 交付 跨 平台 Web 应 用 的 框架 ， 只 使 用 标准 HTMLS 代码 。 一 个 
jQuery Mobile 应 用 看 起 来 大 致 如 图 1-2 所 示 。 





jQuery Mobile 使 用 了 jQuery 核心 ， 此 外 还 包含 一 个 JavaScript 库 、 一 个 CSS3 样式 
表 ， 以 及 一 些 资源 图 片 。 





jQuery Mobile 和 桌面 端的 jQuery UI 类 似 ， 即 它 同样 只 是 一 个 UI 框架 。 它 的 名 字 
没有 包含 UI 这 个 词 ， 这 也 许 会 让 你 怀疑 它 是 一 个 核心 框架 。 在 我 看 来 ， 这 个 命名 
选择 应 该 是 想 借 力 于 jQuery 品牌 在 设计 师 和 开发 者 圈子 中 的 巨大 影响 力 。 

















jQuery Mobile 是 由 jQuery 主 框架 的 开发 团队 创建 的 ， 由 来 自 Mozilla 的 
JavaScript 工具 开发 者 John Resig 带 队 (他 的 twitter 账号 是 @jeresig ) 。 
































译注 1: 经 典 科幻 电影 《 回 到 未 来 》 三 部 曲 中 的 男 主人 公 。 
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< Back Toolbars 





Toolbars are used for headers, footers and utility 
bars throughout a mobile sites and applications, 
so jQuery Mobile provides a standard set of 
bars and navigation tools to cover most 
standard scenarios. 


Toolbar basics 
Header bars 
Footer bars 
Navbars 

Fixed positioning 


Fullscreen positioning 


Oeo 


图 1-2: 一 个 使 用 标准 主题 的 典型 jQuery Mobile Web 应 用 ， 本 例 中 使 用 的 是 webOS 智能 
手机 


和 jQuery 及 jQuery UI 一 样 ， 这 个 新 的 平台 也 是 基于 MIT 或 GPLv2 双 协 议 发 布 的 
开源 项 目 。 


Q^? oo0o00 


"4 








a 





如 果 想 参与 jQuery Mobile 的 开发 ， 可 以 通过 http://jquerymobile.com/ 
n^ , contribute 这 个 网 址 提供 补丁 、bug 修复 以 及 参与 讨论 。 

















1.3 移动 及 平板 的 世界 

人 们 已 不 再 只 通过 桌面 电脑 来 浏览 互联 网 了 。 现 在 ,我 们 有 很 多 种 设备 ， 它 们 有 着 
不 同 的 屏幕 尺寸 、 输 入 方式 ， 甚 至 连 我 们 的 老 朋 友 如 HTML、JavaScript 以 及 CSS 
都 有 了 各 种 新 的 特性 。 

毫 无 疑问 ， 移 动 设备 的 时 代 已 经 来 临 。 全 球 有 50 多 亿 台 移动 终端 ， 并 且 这 个 数目 仍 
在 增长 中 。 与 此 同时 ， 平板 电脑 也 正 迅 速 普及 ， 总 量 以 百 万 计 。 


























1.3.1 设备 分 类 
现在 ， 我 们 可 以 将 移动 设备 分 为 以 下 几 类 : 


。 移动 电话 ， 

。 低 端 移动 设备 ， 

。 中 高 端 移动 设备 ， 也 被 称 为 社交 设备 ， 
。 智能 手机 

。 平板 电脑 。 





1. 移动 电话 
是 的 ， 在 某 些 市 场 上 ， 我 们 还 能 看 见 移动 电话 的 身影 。 它 们 只 具备 通话 和 短信 功能 ， 
没有 浏览 器 ， 不 能 连接 互联 网 ， 无 法 安装 应 用 。 我 们 不 关心 这 些 设备 ， 也 不 能 为 它 
们 做 任何 开发 。 


要 不 了 儿 年 ， 随 着 运营 商 和 设备 制造 商 发 起 的 设备 回收 以 及 产品 更 新 服务 ， 这 些 设 
备 也 许 就 会 从 市 场 上 彻底 消失 了 。 


2. 低 端 移动 设备 

低 端 移动 设备 有 一 个 很 大 的 优势 ， 即 具备 Web 接 入 能 力 。 它 们 一 般 只 自 带 一 个 入 门 
级 的 浏览 器 ,但 总 量 占 市 场 的 主流 。 也 许 这 些 用 户 目前 还 不 是 互联 网 上 最 活跃 的 用 
户 ， 但 随 着 社交 网 络 和 Web 2.0 服务 的 兴起 ， 一 切 可 能 很 快 会 发 生变 化 。 如 果 你 的 
E EN 你 或 许 会 希望 自己 也 可 以 做 到 ， 所 以 只 要 条 件 成 

， 你 可 能 就 会 换 一 新 部 手机 。 

诺基亚 、 摩 托 罗拉 、 京 次 、LG、 三 星 以 及 索尼 爱立信 都 有 定位 于 这 个 市 场 的 设备 。 
它们 通常 不 具有 触 屏 支持 ， 内 存 有 限 ， 只 内 置 了 一 个 入 门 级 的 相机 和 音乐 播放 器 


3. 中 高 端 移动 设备 

对 大 众 市 场 来 说 ， 想 获得 良好 的 互联 网 体验 的 主流 选择 即 是 这 类 中 高 端 移动 设备 。 
中 端 设 备 有 良好 的 用 户 体 验 ， 价格 也 适中 。 最 近 儿 年 来 ， 这 种 类 型 的 设备 被 称 为 社 
交 终 端 ， 也 就 是 说 ， 用 户 可 以 通过 这 类 设备 接 入 社交 网 站 ， 如 Facebook 或 Twitter。 


这 个 类 别 的 设备 通常 有 一 个 中 等 尺寸 的 屏幕 ， 有 基本 的 HTML 浏览 器 支持 ， 有 些 支 
持 3G， 带 有 一 个 不 错 的 相机 、 一 个 音乐 播放 器 ， 能 玩 游 戏 ， 有 些 支持 触 屏 操 作 ， 可 
以 安装 应 用 。 高 端 Sie tate 9 能 手机 间 的 一 个 很 大 的 区 别 是 : 高 端 移动 设备 往往 
不 采用 固定 费 率 计划 ”进行 售卖 ,用 户 必须 自己 去 寻找 这 样 的 套餐 。 从 2011 EF 

















译注 2: 类 似 于 包月 包 流 量 的 套餐 计划 。 











台 ， 这 些 设 备 中 的 大 多 数 开 始 支持 WLAN (WiFi), ， 如 图 1-3, 
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Goto Menu Names 











1-3: 诺基亚 X3-02 fi E BERN: 一 个 中 端 触 屏 设备 ， 带 有 数字 键盘 和 WiFi 


4. 智能 手机 

市 面 上 有 很 多 智能 手机 ， 包 括 iPhone、 基 于 Android 的 设备 、webOS、Symbian、 
黑莓 (BlackBerry) 以 及 Windows Phone 手机 (ILEI 1-4) 。 这 是 最 难 被 定义 的 一 类 
移动 设备 。 人 们 会 问 ， 为 什么 某 些 中 高 端 设备 没有 足够 “智能 ”到 可 以 归 入 智能 手 
机 类 别 ? 关于 智能 的 定义 每 年 都 在 变化 ， 事 实 上， 当前 市 场 上 最 简单 的 移动 设备 在 
10 年 前 看 来 也 是 非常 智能 的 。 
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1-4: 智能 手机 设备 示例 
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通常 当 你 购买 智能 手机 时 ， 需 要 签署 一 份 一 年 或 两 年 期 的 合约 ， 约 定 固定 的 费 率 和 
数据 流量 计划 。 符 合 当前 关于 智能 手机 的 定义 的 设备 ， 通 常会 有 一 个 支持 多 任务 
的 操作 系统 、 一 个 现代 的 支持 HTML5 的 浏览 器 ， 支 持 无 线 局 域 网 (WLAN， 也 称 
WiFi) 和 3G 接 入 ， 还 会 有 一 个 音乐 播放 器 ， 以 及 下 列 功 能 : 


。 GPS (全 球 定位 系统 ) 或 A-GPS (辅助 全 球 定位 系统 ) ; 
。 数字 指南 针 ， 

。 可 录像 的 相机 ， 

。 TV 输出 ; 

。 Vu 

。 触 屏 ; 

。 3D 视频 加 速 ， 

。 加 速 传感器 。 


Aa 








: 一 些 多 媒体 设备 也 被 我 们 这 些 Web 创作 者 列 为 智能 手机 ， 但 它们 其 实 没 有 
Wa. 电话 功能 。 这 些 设备 包括 Apple 的 iPod Touch 和 Sony 的 PSP。 它 们 和 平 
U^ 板 电脑 唯一 的 区 别 是 其 屏幕 尺寸 通常 小 于 3 英寸 。 

















5. 平板 电脑 

平板 电脑 通常 带 有 一 块 大 屏幕 (6 到 11 英寸 之 间 )、 一 个 完整 支持 HTMLS 的 浏览 
器 ， 支 持 WLAN ERA (WiFi)， 有 的 带 3G， 支 持 触 屏 操 作 ， 还 有 具备 那些 能 在 智能 
手机 上 找到 的 所 有 其 他 功能 。 


在 这 个 分 类 中 ， 我 们 可 以 找到 很 多 设备 ， 包 括 : 


。 苹果 iPad; 

e = Æ Galaxy Tab; 

。 黑莓 BlackBerry PlayBook; 

* E (Barnes and Noble) Nook Color; 
。 摩托 罗拉 Xoom; 

* LG Optimus Pad; 

。 亚马逊 Kindle Fire; 

。 索尼 Sl 和 S2。 


1.3.2 ”操作 系统 和 浏览 
本 书 并 未 打算 深入 研究 移动 设备 的 生态 系统 。 在 《移动 网 络 程序 设计 》 一 书 中 ， 可 以 
找到 一 个 详细 列举 了 各 种 操作 系统 、 平 台 和 浏览 器 的 列表 。 不 过 ， 如 果 打 算 创 建 移 











动 Web 体验 ， 至 少 要 对 操作 系统 和 浏览 器 有 所 了 解 。 


在 移动 设备 的 世界 里 ， 我 们 将 操作 系统 分 为 两 大 类 : 可 识别 的 操作 系统 和 专 有 操作 
系统 。 移 动 电话 、 低 中 端 移动 设备 上 的 操作 系统 大 多 属于 后 一 类 。 


对 那些 安装 了 可 识别 操作 系统 的 设备 ， 我 们 更 关心 它 上 面 所 运行 的 操作 系统 ， 而 不 
R n oed cus 
deed 而 是 要 为 Android 设备 开发 Web MH. iPhone 是 一 个 例外 ， 因 为 它 的 

台 是 专 有 的 ， 在 写作 本 书 的 时 候 ， 这 个 平台 只 支持 一 个 设备 : iPhone。( 不 同 版 本 
的 设备 也 遵循 相同 的 规则 ， 对 Web 开发 者 而 言 ，iPhone 4 和 iPhone 3GS 并 没有 大 
大 的 区 别 。) 


表 1-1 列举 了 当前 市 场 上 所 有 智能 手机 和 平板 电脑 所 使 用 的 操作 系统 。 
表 1-1: 智能 手机 、 社 交 设 备 以 及 平板 电脑 上 的 操作 系统 和 浏览 

















操作 系统 厂 [5] 内 置 浏览 其 他 浏览 
iOS Apple Safari Opera Mini 和 伪 浏 览 器 
Android Google Android 浏览 器 Firefox, Opera Mini, Amazon 


Silk, Opera Mobile 





览 器 


Symbian Nokia Symbian 浏览 Opera Mini, Opera Mobile 





webOS/Open webOS | HP (曾经 的 Palm) | webOS 浏览 器 






































Windows Phone 微软 IE 

Windows Mobile 微软 IE Opera Mobile 
MeeGo Nokia Micro 浏览 器 /Nokia 浏览 器 | Firefox 
BlackBerry OS RIM BlackBerry iX] i gS Opera Mini 
Tablet OS RIM Tablet OS 浏览 器 

S40 诺基亚 诺基亚 浏览 器 

Bada 三 星 三 星 浏 览 器 


每 个 操作 系统 都 有 多 个 版 本 ， 有 些 系统 允许 用 户 升级 到 新 版 本 。 每 个 操作 系统 都 内 
置 一 个 浏览 器 ， 不 过 用 户 可 以 自行 安装 使 用 其 他 浏览 器 。 有 时 设备 制造 商 或 者 运营 
商 〈 你 从 他 们 那 买 的 设备 ) 会 安装 别 的 浏览 器 ， 比 如 Opera Mobile 浏览 器 ， 或 者 用 
"EA ich UG AIAI V F o 


如 果 我 们 将 浏览 器 的 调查 延伸 至 中 低 端 设备 ， 还 会 进一步 发 现 20. 多 种 其 他 浏览 器 ， 
如 Ovi 浏 览 器 、NetFront 浏览 器 以 及 LG HJ Phantom 浏览 器 。 但 它们 目前 都 不 是 
jQuery Mobile 的 应 用 目标 。 








什么 是 伪 浏 览 器 


伪 浏 览 器 是 一 个 用 户 可 安装 到 设备 上 的 本 地 应 用 ， 它 们 和 默认 浏览 器 使 用 同一 个 
引擎 ， 但 是 提供 了 更 多 的 功能 。 在 iOS 上 有 大 量 这 样 的 例子 ， 如 SkyFire 或 Perfect 
Browser， 它 们 都 使 用 Safari 作 为 最 终 演 染 引 掌 ， 因 此 ， 对 jQuery Mobile 而 言 ， 它 
们 是 同一 个 浏览 器 。 











在 《移动 网 络 程序 设计 》 一 书 中 有 20 页 关于 每 个 浏览 器 类 型 及 特性 的 详细 介绍 





1.8.8 jQuery Mobile R Zl 

jQuery Mobile 框架 专注 于 智能 手机 、 平 板 电脑 以 及 多 媒体 设备 等 触 屏 设备 ， 它 的 兼 
容 列 表 会 随 着 时 间 的 推进 以 及 框架 本 身 的 继续 演化 而 改变 ， 因 此 ， 这 儿 疫 法 给 出 完 
整 的 清单 。 


jQuery Mobile 1.0 版 与 下 列 系统 的 默认 训 览 如 兼 容 








e iOS 
iOS 3.2 版 开始 的 iPhone, iPod Touch 以 及 iPad 版 Safari, 


* Android OS 
手机 及 平板 版 Android 浏览 器 


* BlackBerry OS 
BlackBerry 浏览 器 ， 智 能 手机 版 5.0 版 及 最 新 版 ， 以 及 平板 电脑 版 。 


* Symbian 


支持 触 屏 设备 的 Nokia 浏览 器 


* webOS 
E webOS 1.4 版 开始 的 webos 1 và 23 


* Bada 
Bada 浏览 器 


* MeeGo 
Micro 浏览 器 及 Nokia 浏览 器 (内置 在 Nokia N9 中 ) 。 





* Windows Phone 
Windows Phone/Mobile 6.5 及 Windows Phone 7.0 中 的 IE, 


* Kindle 
Kindle 3 中 的 浏览 器 。 


jQuery Mobile 也 与 下 列 第 三 方 浏览 器 兼容 : 


e Opera Mini， 自 5.0 版 开始 在 大 多 数 设备 上 都 能 完整 支持 ; 
。 Opera 移动 版 ， 自 10.0 版 开始 在 大 多 数 设 备 上 都 能 完整 支持 ， 
。 Firefox 移动 版 。 


这 个 兼容 清单 只 是 让 你 有 一 个 初步 了 解 ， 完 整 的 兼容 性 展示 远 比 这 个 清单 复杂 ， 
为 多 个 操作 系统 版 本 与 多 个 浏览 器 版 本 相互 交织 ， 不 同 的 组 合 可 能 产生 不 同 的 结 
果 。 甚 至， 这 里 没有 列 出 的 新 设备 也 可 能 兼容 jQuery Mobile， 只 要 它 支 持 jQuery 
Mobile 框架 所 必需 的 最 少 特性 。 


简单 来 说 ，jQuery Mobile 能 兼容 每 个 浏览 器 并 提供 框架 支持 的 体验 。 所 有 现代 浏览 
器 都 应 该 在 这 个 清单 中 。 





au ga Chrome, 所 有 现代 的 基于 WebKit HJF zl DI Vi zs WD VRBE 76 RE EZ jQuery 
Mobile, Elt, sii ÉÜJ Chrome, Firefox, Safari, Opera 以 及 IE 等 浏览 
器 都 与 jQuery Mobile 兼容 。 


*] * 许多 现代 浏览 器 使 用 基于 WebKit 的 引擎 ， 如 桌面 版 浏览 器 Safari 或 
Aa 

t 

(i 








移动 分 级 浏览 器 支持 
jQuery Mobile 用 一 个 图 表 来 表示 它 与 各 个 设备 的 兼容 情况 (IE 1-5)。 如 果 我 
是 你 ， 我 就 不 会 去 趟 这 道 分 类 的 混 水 ， 不 过 ， 要 是 你 真 想 了 解 更 多 信息 ， 可 以 在 


http;//jquerymobile.com/gbs/ 查看 。 


许多 现代 桌面 浏览 器 ， 如 Firefox, Google Chrome, Safari 或 IE 也 都 兼容 
Èd. jQuery Mobile。 虽 然 jQuery Mobile 无 意 于 桌面 应 用 ， 但 这 个 特性 在 测试 
"^C 时 会 很 有 有用。 另外， 后面 我 们 也 会 看 到 安装 一 个 模拟 环境 也 很 有 用 。 








我 相信 兼容 性 问题 远 比 这 个 表 上 列 出 的 要 复杂 ， 并 且 一 般 Web 设计 及 开发 人 员 不 必 
太 关 心 。 判 断 一 个 移动 浏览 器 是 否 支持 某 个 特性 ， 有 比 将 它们 逐一 分 类 更 好 的 办 法 ， 
其 中 一 个 方案 就 在 你 手中 : 使 用 jQuery Mobile。 
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/ Mobile Graded Browser Supe x \ 
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Platform Version Native Opera Mobile Opera Mini Fennec Ozone Netfront Phonegap 
8.5 8.65 9.5 10.0 40 50 10 77 09 4.0 0.9 
v2.2.1 
ios v3.1.3, v3.2 MA a] 
ma 
TEE ogg 
HE: 
CX v3.0, v3.1 
v3.2 
Symbian Platform 30 
v4.5 
v4.6, v4.7 
BlackBerry OS zi 
v6.0 
v1.5, v1.6 
Android v2.1 
v22 四 
^ ccc cE c l 
Wnowsmosie vess 





图 1-5: jQuery Mobile 在 它 的 网 站 上 维护 着 一 个 浏览 器 兼容 清 


HH 一 | 


GBS (分 级 浏览 器 支持 ，Graded Browser Support) 将 移动 浏览 器 
级 、B 级 以 及 C 级。 对 jQuery Mobile 来 说 ， 各 级 含义 如 下 : 





A 级 
支持 CSS3 媒体 查询 (media queries) 的 浏 


Wy ng Vy BR 人 
AL, für o 


M ü zx 


ZKI 


分 为 三 个 级 别 : A 





被 jQuery 团队 完 


整地 测试 。 不 过 ， 如 果 设 备 不 支持 ， 则 一 些 特性 会 被 自动 禁用 。jQuery Mobile 





将 提供 一 个 完整 的 基于 AJAX 动画 的 体验 。 


。 B 级 

具有 增强 体验 ,但 是 没有 AJAX 导航 特性 的 浏览 器 。 
。 CA 

不 兼容 jQuery Mobile 的 浏览 器 。 这 类 浏览 器 不 外 


EM jQuery Mobile 框架 接收 任何 





CSS 或 JavaScript 代码 ， 因 此 用 户 将 只 能 看 到 一 个 无 样式 的 HTML 文件 内 容 。 本 


书后 面 会 提 到 如 何 处 理 这 种 情况 。 








PhoneGap 以 及 原生 开发 
Wa. 上 面 的 jQuery Mobile 移动 分 级 浏览 器 支持 表 中 ，PhoneGap 被 当 作 了 一 个 
浏览 器 。 不 过 ，PhoneGap 并 不 是 浏览 器 ， 它 是 一 个 用 于 创建 混合 解决 方案 
(嵌入 了 Web 应 用 的 原生 应 用 ) 的 框架 。 在 i0S、Symbian、BlackBerry、 
Android 以 及 webOS 等 平台 上 ，PhoneGap 都 被 jQuery 官方 支持 。 

好 消息 是 ， 你 可 以 使 用 任何 你 喜欢 的 混合 解决 方案 框架 ， 只 要 设备 支持 
PhoneGap, jQuery Mobile 就 也 能 工作 ， 这 是 因为 PhoneGap 不 是 浏览 器 本 
身 ， 而 是 一 个 使 用 了 原生 浏览 器 引擎 的 




















A. 





IHI 


简单 来 说 ，jQuery Mobile 兼容 使 用 HTML 创建 原生 应 用 。 


1.4 HTML5 和 CSS3 


我 知道 大 多 数 Web 设计 及 开发 人 员 都 对 HTML5 和 CSS3 RA Li. RAER: 
不 要 担心 ，jQuery Mobile 将 为 你 处 理 一 切 。 因 此 ， 即 使 不 懂 HTMLS 或 CSS3 也 可 
以 使 用 jQuery Mobile。 尽 管 如 此 ， 我 仍然 鼓励 你 学 习 一 下 HIML5 和 CSS3， 这 样 
在 将 来 的 讨论 中 ， 你 将 对 这 些 新 标准 有 一 个 更 深 的 认识 。 


本 书 不 会 教 读者 HTML5 或 CSS3， 不 过 ， 了 解 一 些 相 关 知 识 很 重要 。 很 多 智能 手 
机 、 平 板 电脑 内 置 的 移动 浏览 器 都 支持 HTML5、CSS3 以 及 其 他 API, 


关于 HIML5 有 很 多 可 谈论 的 东西 ， 包 括 它 的 历史 以 及 它 为 移动 世界 带 来 了 什么 。 


严格 来 说 ，HTML5 是 一 个 发 展 中 的 标准 ， 它 包含 了 若干 对 HTML 标记 语言 的 改 
变 以 及 大 量 JavaScript 中 的 新 API (是 的 ，HTML5 的 大 部 分 内 容 是 关于 JavaScript 
API 的 )。 在 非 正 式 的 场合 中 ，HTML5 是 许多 浏览 器 中 的 现代 特性 的 汇总 ， 包 
括 W3C 的 正式 的 HTML5 标准 、 其 他 W3C API, CSS3 以 及 非 标准 扩展 。 可 以 在 
http://mobilehtml5.org 看 到 HTMLS 在 各 移动 浏览 器 中 的 兼容 信息 。 


jQuery Mobile 使 用 了 大 量 的 HTMLS 特性 以 便 在 移动 浏览 器 上 提供 更 好 及 更 快 的 体 
验 。 不 过 这 并 不 意味 着 浏览 器 必须 完整 地 支持 HTML5。 事 实 上 , 许多 早 于 HTML5 
出 现 的 老 浏览 器 也 支持 一 些 HTMLS 标记 。 在 处 理 动画 、 渐 变 、 特 效 以 及 UI 泻 染 
时 ，jQuery Mobile 将 尽 可 能 地 使 用 CSS3。 























为 了 进一步 引起 你 的 兴趣 ， 必 须 得 告诉 你 : 使 用 HTML5、CSS3 以 及 一 些 其 他 现代 
技术 ， 可 以 获得 下 列 特性 (无 论 是 否 带 有 jQuery Mobile 体验 ) : 

。 离线 访问 ， 

。 离线 存储 ，; 
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* Websockets; 

。 地 理 位 置 访问 ， 

。 加 速 计 及 陀螺 仪 支持 ; 

动画 ; 

* 2D 及 3D 变换 ; 

。 渐变 及 视觉 特效 ， 

。 视 口 (viewport) 管理 (用 于 浏览 器 内 置 的 缩放 支持 ) ; 
。 Web 应 用 安装 元 数据 ， 

。 与 原生 应 用 整合 

。 多 媒体 支持 ， 

。 绘图 (矢量 图 及 位 图 ) s 
。 支持 自 定义 字体 。 


我 的 博客 http://www.mobilexweb.com/ 上 有 一 些 关于 这 些 特性 的 例子 及 链接 。 


1.5 主要 特性 


作为 一 个 现代 框架 ， jQuery Mobile 项 目 始 于 2010 年 8 月 ， 它 包含 很 多 适用 于 多 平 
台 开 发 的 模式 及 最 佳 实践 。 这 个 框架 的 主要 特性 有 : 


。 跨 平台 、 跨 设备 、 跨 浏览 器 ， 

。 为 触 屏 设备 优化 过 的 UL; 

。 设计 为 可 修改 主题 及 自 定义 ; 

。 只 使 用 无 侵入 性 的 HTMLS 代码 ， 无 需 了 解 任何 JavaScript, CSS 或 API 知识 ，; 
。 自动 调用 AJAX 来 加 载 动态 内 容 ; 

。 构建 于 知名 及 有 良好 支持 的 jQuery 核心 之 上 ; 

。 轻 量 级 尺寸 ， 压 缩 后 为 12KB ; 

。 渐进 增强 ， 

。 可 访问 性 支持 。 




















我 们 已 经 讨论 过 其 中 一 些 特性 ， 现 在 让 我 们 深入 分 析 一 下 甚 他 方面 。 


1.5.1 使 用 非 侵 入 性 语义 的 HTML5 
我 知道 你 急切 地 想 看 代码 ， 现 在 代码 来 了 。jQuery Mobile 使 用 标准 及 无 侵入 性 的 
HTMLS 创建 Web 应 用 ， 特 别 适合 搜索 引擎 优化 (SEO) 以 及 网 站 性 能 优化 (WPO)。 








<!DOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>My first jQuery Mobile code</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/ 
jquery.mobile-1.0.min.css" /> 
«script src-"http://code.jquery.com/jquery-1.6.4.min.js"»«/script» 
«Script type-"text/javascript" srcz'http://code.jquery.com/mobile/ 
1.0/jquery.mobile-1.0.min.js"»«/script» 
«meta name-'"viewport" content-"width-device-width, initial-scale-1"- 
«/head» 


«body» 
«div data-role-"page" data-theme-"a"- 
«div data-role-"header"-» 
«h1»jQuery Mobilec/h1» 
«/div» 
«div data-role-"content"- 


«ul data-role-"listview" data-inset-"true" data-divider- 
theme="b"> 
«li data-role="list-divider">Summary</1i> 
<li><a href-"chl.html"»The Platform</a></li> 
<li><a href="cap2.html">The Page</a></li> 
<li><a href="cap3.html">Lists</a></1i> 
<li><a href="cap4.html">Components</a></li> 
</ul> 


«ul data-role-"listview" data-inset-"true" data-divider- 
theme="d"> 
«li data-role="list-divider">Links</1i> 
<li><a href="http://www.mobilexweb.com">Mobile Web Blog 


«/a»«/li» 
<li><a href-"http://www.oreilly.com"»O'Reilly Media</a> 
«/li» 


«/ul» 


</div> 
<div data-role="footer"> 
<h4>&copy; 2011 Maximiliano Firtman @firt</h4> 
«/div» 
«/div» 
«/body» 
</html> 


从 图 1-6 "T LUE Sl iX A R AE JLA h Use EE, E 1-7 则 显示 了 


不 兼容 jQuery Mobile 的 情况 。 如 你 所 见 ， 代 码 中 没有 用 于 初始 化 或 其 他 用 途 的 
JavaScript 代码 ， 只 不 过 包含 了 儿 个 JavaScript 文件 。 
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1-6: 上 面 的 jQuery Mobile 代码 示例 在 ijOS、webOS 以 及 Android 设备 上 的 效果 
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1-7: 在 不 兼容 的 浏览 器 上 ，jQuery Mobile 将 降级 为 一 个 简单 的 、 功 能 齐全 的 HTML 文件 
不 要 急 ， 下 一 章 我 们 就 开始 分 析 上 面 的 jQuery Mobile 代码 。 


1.5.2 ”渐进 增强 

渐进 增强 是 一 种 用 于 Web 设计 的 简单 但 非常 强大 的 技术 ， 它 定义 了 几 个 层次 的 兼容 
性 ,允许 所 有 用 户 都 能 访问 网 站 的 基本 的 内 容 、 服 务 以 及 功能 ， 同 时 在 那些 对 标准 
支持 更 好 的 浏览 器 上 提供 增强 的 体验 。jQuery Mobile 完全 使 用 这 个 技术 构建 。 
渐进 增强 这 个 术语 由 Steven Champeon 在 2003 年 提出 (http://www.hesketh.com)， 
虽然 这 个 技术 并 不 是 专门 为 移动 互联 网 定义 的 ， 但 它 却 特别 适合 移动 互联 网 设计 。 


渐进 增强 有 以 下 核心 原则 





。 ERAU Va BRE DI Io] A AS ALZE s 

。 在 所 有 浏览 器 上 都 能 使 用 基本 功能 

。 语义 标签 包含 了 所 有 内 容 ; 

。 增强 布局 由 外 部 链接 的 CSS 提供 ， 

。 增强 行为 由 不 冲突 的 、 外 部 链接 的 JavaScript 提供 ， 
。 尊重 终端 用 户 浏 览 器 的 偏好 设置 。 


这 个 列表 看 起 来 是 不 是 像 jQuery Mobile 的 特性 列表 ?是 的 ， 就 是 这 样 。jQuery 
Mobile 应 用 也 能 在 不 支持 CSS 或 JavaScript 的 入 门 级 的 浏览 器 上 工作 ， 这 对 移动 互 
联网 应 用 来 说 是 一 个 很 好 的 特性 。 


1.5.8 ”可 访问 性 支持 

维基 百科 上 的 定义 : 
Web 可 访问 性 指 的 是 让 网 站 对 所 有 正常 人 及 残疾 人 都 可 用 的 一 系列 做 法 。 在 正确 
地 设计 、 开 发 以 及 编辑 的 网 站 上 ， 所 有 用 户 都 可 以 平等 地 访问 网 站 提供 的 各 种 信 
息 及 功能 

移动 浏览 器 上 的 Web 可 访问 性 浪潮 才刚 刚 兴 起 。 不 过 ，jQuery Mobile CAZAR 


容 W3C 关于 浏览 器 兼容 的 WAI-ARIA 标准 (http://www.w3.org/TR/wai-aria/)。 在 
写作 本 书 的 时 候 ， 还 只 有 带 VoiceOver 特性 的 iOS 4.0 或 更 新 版 本 才 兼 容 这 个 标准 。 





因此 ， 在 iPhone, iPod 以 及 iPad 上 ， 基 于 jQuery Mobile 的 Web 应 用 都 能 为 有 视力 
障碍 的 人 士 提供 可 访问 体验 。 


1.6 测试 Web 应 用 

我 们 提 到 过 ， 基 于 jQuery Mobile 的 Web 应 用 可 以 在 绝 大 多 数 现代 桌面 浏览 器 上 运 
行 ， 不 过 ， 最 好 还 是 能 在 更 精准 的 环境 中 进行 测试 〈 见 图 1-8). 

要 在 不 同 的 环境 中 测试 移动 Web 应 用 ， 可 以 使 用 : 

。 真实 的 设备 ， 

。 远程 实验 室 

。 仿真 器 

。 模拟 器 

。 大 量 的 朋友 >’. 


译注 3: 指 让 朋友 们 用 自己 的 手机 帮忙 测试 。 
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图 1-8: fr iPad 上 测试 jQuery Mobile 的 可 访问 | 


1.6.1 仿真 器 与 模拟 器 
仿真 器 与 模拟 器 是 最 有 用 的 工具 。 
从 原始 架构 翻译 为 当前 运行 平台 的 代码 ， 让 我 们 能 如 
作 系 统 及 程序 。 在 移动 开发 的 世界 里 ,仿真 器 是 仿真 移动 设备 的 硬件 及 操作 系统 的 





+ 


总 的 来 说 ,仿真 器 是 一 个 软件 ， 将 已 编译 的 代码 





FE 一 个 操作 系 


统 上 运行 男 一 个 操 





桌面 程序 ， 可 用 于 测试 及 调试 应 用 ， 以 及 查看 应 用 的 工作 状况 。 浏 览 器 甚至 操作 系 
统 并 不 会 意识 到 它们 正 运行 在 仿真 器 上 ， 所 以 相同 的 代码 也 能 在 真实 的 设备 上 运行 。 


我 们 的 移动 开发 环境 中 也 应 该 添加 一 些 项 目 及 配置 管理 的 经 典 工具 ， 如 bug 追踪 、 
版 本 管理 以 及 项 目 管理 等 工具 。 图 1-8 显示 了 如 何在 iOS 4.0 或 更 新 版 本 的 iPhone, 
iPod X iPad 上 测试 jQuery Mobile 的 可 访问 性 。 打 开 菜 单 “ 设 置 > 通 用 > 可 访问 性 ” 
并 激活 VoiceOver， 然 后 闭 上 眼睛 ， 使 用 手指 及 耳 打 浏览 你 的 网 站 。 


1-9 展示 了 一 个 Android 仿真 器 在 桌面 上 提供 完整 的 Android 系统 图 形 化 的 效果 ， 
可 用 于 仿真 Galaxy Tab 或 Nook Color 等 平板 设备 。 
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& 1-9; 一 个 Android 仿真 器 


仿真 器 由 厂商 开发 ， 向 开发 者 免费 提供 ， 有 些 是 独立 程序 ， 有 些 则 与 开发 原生 应 用 
的 软件 开发 工具 包 (SDK) 捆绑 在 一 起 。 


也 有 一 些 操 作 系 统 仿真 器 ， 它 们 与 任何 真实 的 设备 硬件 无 关 ， 只 仿真 了 操作 系统 。 
Windows Mobile 和 Android 都 有 这 类 仿真 器 。 


另 一 方面 ， 模 拟 器 则 是 相对 简单 的 程序 ， 它 只 模拟 设备 的 一 些 行为 ， 但 不 能 模拟 
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硬件 ， 也 不 是 基于 真实 的 操作 系统 设计 的 。 这 些 工具 比较 简单 ， 比 仿真 器 用 途 少 。 
模拟 器 可 能 由 设备 制造 商 创建 ， 也 可 能 其 他 为 开发 者 提供 模拟 环境 的 公司 提供 。 
在 移动 浏览 方面 有 一 些 像素 级 的 模拟 器 ， 还 有 一 些 则 既 没 有 禁 换 桌面 浏览 器 (如 
Firefox 或 Safari) 的 外 观 ， "m 图 1-10 显示 了 Mac 中 免费 iOS 模 
拟 器 提供 的 iPad 模拟 。 甚 他 平板 电脑 ， 包 括 Windows 或 Linux 桌面 机 ， 也 有 类 似 
的 模拟 器 














: iPad / iOS 4.2 (8C134) 


The Platform 


The Page 


Lists 














图 1-10; iOS 模拟 器 





就 算 使 用 仿真 器 ， 最 终 泻 染 效 果 以 及 性 能 也 可 能 和 真实 设备 上 不 完全 一 样 。 因 此 ， 
使 用 真实 设备 来 测试 是 一 个 不 错 的 做 法 ， 即 使 只 在 一 些 重要 设备 上 测 à. 

















对 手机 网 页 开发 来 说 ， 可 以 找到 Nokia、Symbian、BlackBerry、Android、webOS 
以 及 Windows Mobile 的 仿真 器 ， 还 有 来 自 人 苹果 公司 的 用 于 iPhone 和 iPad 的 模拟 器 
(不 过 只 能 在 Mac OS X 上 使 用 ) 。 



































还 有 一 些 基于 浏览 器 的 仿真 器 (最 终 能 在 许多 不 同 的 平台 上 运行 )， 如 Opera Mobile 
仿真 器 。 


表 1-2 列 出 了 可 下 载 的 仿真 器 与 模拟 器 。 














X1-2: 可 下 载 的 仿真 器 与 模拟 器 









































名 字 平 台 类 型 可 用 浏览 Windows | Mac |Linux 
iOS 模拟 器 iOS 模拟 器 。 | Safari 否 是 否 
Android 仿真 器 Android 仿真 器 Android 浏览 器 ， 可 下 是 是 是 
载 
HP webOS 仿真 器 webOS 仿真 器 。 | webOS 浏览 器 是 是 是 
Nokia Symbian 仿真 器 | Symbian 仿真 器 内 置 浏 览 器 ， 可 下 载 是 f f 
Windows Phone 仿真 器 | Windows Phone | 仿真 器 IE 是 f f 
Nokia S40 仿真 器 Nokia OS 仿真 器 ”|S40、Ovi Ù 览 器 、 是 T L5 
Opera Mini 
BlackBerry 模拟 器 BlackBerry OS. | 仿真 器 BB 浏览 器 ， 可 下 载 是 T L5 
BlackBerry PlayBook 模 | Tablet OS 仿真 器 Internal 浏览 器 是 是 是 
DE: 
Opera 移动 仿真 器 很 多 浏览 器 仿 |Opera Mobile 是 是 是 
真 器 
Opera Mini 模拟 器 很 多 在 线 浏 览 |Opera Mini 是 是 是 
器 仿真 器 
PhoneGap 模拟 器 很 多 模拟 器 PhoneGap 混合 是 是 是 
Adobe 设备 中 心 很 多 模拟 器 很 多 是 是 否 























最 新 的 仿真 器 下 载 链接 列表 见 http://www.mobilexweb.com/emulators, 


1.6.2 ”远程 实验 室 

远程 实验 室 是 一 种 Web 服务 ， 我 们 可 以 远程 使 用 不 在 同一 个 物理 位 置 的 真实 的 设 

is 这 是 一 个 简单 但 强大 的 解决 方案 案 ， 只 需 鼠 标 一 点 ， 即 可 访问 世界 各 地 数 以 千 计 
连接 到 真实 网 络 的 真实 设备 。 可 以 把 它 想象 为 移动 电话 的 远程 桌面 。 


这 个 市 场 上 最 有 用 的 服务 如 下 : 





。 Keynote DeviceAnywhere (商业 ) 


http://www.deviceanywhere.com 


* Perfecto Mobile (商业 ) 


http://www.perfectomobile.com 


* Nokia Remote Device Access for Symbian and MeeGo (免费 ) 


http://www.mobilexweb.com/go/rda 


e Samsung Lab.Dev for Android (免费 ) 


http://www.mobilexweb.com/go/labdev 


关于 这 个 主题 的 最 新 信息 见 http://www.mobilexweb.com/go/labs., 
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2.1 准备 文档 


让 我 们 挽 起 袖子 ， 创 建 一 个 典型 的 jQuery Mobile Web 应 用 模板 。 





2.1.1. 需求 

我 们 的 HTMLS 文档 需要 包含 : 

。 jQuery 核心 JavaScript 文件 ; 

。 jQuery Mobile 核心 JavaScript 文件 ; 

。 jQuery Mobile 核心 CSS 文件 ，; 

e jQuery Mobile 主题 CSS 文件 (可 选 )。 


另外 ， 对 于 某 些 UI，jQuery Mobile 会 使 用 一 系列 PNG 文件 ， 不 过 不 用 显 式 包 含 它 
们 。 还 有 一 个 版 本 的 CSS 文件 同时 包含 了 核心 文件 和 默认 主题 。 


在 编码 之 前 ， 首 先 要 决定 的 是 资源 文件 的 托管 。 有 两 个 选择 : 


。 将 所 有 文件 托管 在 项 目 中 ， 
。 使 用 CDN (内 容 分 发 网 络 ) ; 








2.1.2 托管 文件 


如 果 想 将 所 有 文件 和 Web 应 用 托管 在 一 起 ， 需 要 从 http://jquerymobile.com/ 
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download 下 载 最 新 的 ZIP 包 。 该 ZIP 包 的 名 字 中 包含 框架 的 版 本 ， 例 如 jQuery. 
mobile-1.0.zip。 





jQuery Moile 包 中 不 含 jQuery 核心 ， 后 者 需要 从 http://jquery.com 下 载 (推荐 下 载 
生产 版 本 )。 


jquery.mobile-XX.zip 包 的 结构 如 下 。 


。 示例 文件 夹 ， 

。 图 片 文件 夹 ， 

* jquery.mobile-XX.css; 

e jquery.mobile-XX.js; 

e jquery.mobile-XX.min.css; 

e jquery.mobile-XX.min.js ; 

e jquery.mobile.structure-XX.css ; 


e jquery.mobile.structure-XX.min.css, 





其 中 ，XX 是 版 本 号 ， 包 括 发 布 类 型 ， 如 : 1.1b1 代表 1.1 Betal 版 ，1.0rc2 代表 1.0 
候选 版 本 2， 或 1.0 代表 1.0 最 终 版 。 


程序 包 里 有 两 类 JavaScrip//CSS 文件 ， 一 类 文件 名 中 有 min MR, RRA. 


带 min 后 级 的 文件 推荐 用 于 生产 版 本 ， 因 为 它们 已 被 压缩 (去掉 了 空格 、 注 释 以 及 
换行 )。 如 果 需 要 在 jQuery Mobile 中 调试 ， 则 可 使 用 不 带 后 绥 的 版 本 。 








jQuery Mobile 1.0 需要 1.6.4 版 的 jQuery。 不 要 使 用 更 新 的 jQuery， 因为 
MESS 可 能 有 兼容 问题 。 如 果 正 在 使 用 新 版 本 的 jQuery Mobile， 检 查 一 下 它 的 文 
档 ， 确 定 它 需要 哪个 版 本 的 jQuery。 

















一 般 情况 下 ， 需 将 下 列 文件 添 加 到 项 目的 根 目 录 下 : 
e jquery-XX.js GEH jQuery 核心 ) ; 

。 图 片 文件 夹 ， 

* jquery.mobile-XX min.js; 


* jquery.mobile-XX min.css, 


如 果 使 用 PhoneGap 或 其 他 离线 /混合 机 制 创 建 Web 应 用 ， 那 么 最 好 将 这 些 文件 般 
入 到 程序 包 中 ， 这 样 Web 应 用 就 可 以 离线 工作 了 。 


在 本 书后 面 的 章节 中 可 以 看 到 ， 那 些 带 结 构 名 的 文件 在 创建 自 定 义 主 题 时 很 有 用 。 
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jQuery Mobile 的 许可 
jQuery Mobile (以 及 作为 核心 的 jQuery) 是 免费 的 ， 它 们 使 用 MIT 或 GPL 第 二 版 
双 协 议 开 源 。 对 大 多 数 项 目 来 说 ， 推 荐 使 用 MIT 协 议 ， 无 须 从 我 们 这 儿 获 得 授 
权 。 唯 一 需要 注意 的 是 不 要 删除 或 修改 文件 顶部 的 版 权 信息 。 有 任何 疑问 ， 请 参 
考 http://jquery.org/license。 








在 自己 的 服务 器 上 托管 这 些 文件 时 ， 需 要 确认 服务 器 端 会 在 客户 端 支持 时 启用 gzip Hs 





缩 ， 这 将 令 jQuery Mobile 的 JavaScript 和 CSS 传输 及 加 载 时 间 减 少 80%。 如 果 不 知 道 
怎么 做 ， 请 咨询 你 的 服务 器 提供 商 ， 或 者 查看 http://mobilexweb.com/go/performance。 


2.1.3 使 用 CDN 


有 一 个 更 简单 的 使 用 jQuery Mobile 的 方法 : 使 用 CDN (Content Delivery Networks, 
内 容 分 发 网 络 ) 。jQuery CON 是 为 我 们 在 互联 网 上 托管 相关 文件 的 公共 服务 器 。 这 
个 方法 有 优点 也 有 缺点 。 

最 大 的 缺点 是 我 们 的 Web 应 用 将 只 能 在 公共 CDN 在 线 时 才能 工作 。 当 然 ， 它 们 正 
是 为 此 而 建 的 ， 会 竭尽 所 能 地 保证 每 周 24 小 时 不 间断 服务 。 不 过 ， 有 些 项 目 不 能 依 
赖 第 三 方 服务 ， 如 离线 Web 应 用 。 





使 用 jQuery Mobile 创建 混合 或 原生 应 用 (如 PhoneGap 应 用 ) 时 ， 不 应 该 














~ 使 用 CDN。 如 果 设 备 掉 线 了 ， 甚 至 连用 框架 显示 一 个 友好 的 警告 都 做 不 

















到 。 创 建 HTMLS 离线 Web 应 用 时 ， 如 果 已 将 CDN 文件 加 入 了 应 用 程序 
清单 (manifest), ， 则 可 以 使 用 CDN. 





一 





使 用 CDN 的 主要 优点 如 下 。 





不 用 下 载 ， 马 上 就 可 使 用 jQuery Mobile, 

你 的 服务 器 分 发 的 文件 更 少 ， 从 而 节约 带宽 。 

Web 应 用 将 从 缓存 中 受益 : 如 果 用 户 曾 访问 过 另外 的 使 用 同一 个 CDN 上 的 
jQuery MobileWeb 应 用 ， 那 么 他 的 浏览 器 缓存 可 能 已 经 有 所 有 相关 资源 了 。 

对 大 多 数 共享 主机 来 说 ，jQuery Mobile 资源 从 CDN 下 载 会 更 快 。 

Web 应 用 的 性 能 将 从 不 同 的 域名 中 受益 。 

对 有 些 CDN 来 说 ， 链 接 到 一 个 地 址 时 总 是 返回 最 新 的 版 本 。 不 过 ， 有 时 我 们 并 
不 推荐 这 种 特性 ， 因 为 如 果 没 测试 ， 你 永远 不 会 知道 你 的 Web 应 用 在 新 版 本 的 
框架 下 会 有 什么 表现 。 














本 书 中 没有 关于 移动 浏览 器 WPO (Web Performance Optimization, W) ih PE RE ff 
化 ) 的 内 容 。 如 果 想 了 解 更 多 相关 信息 ， 请 访问 http//www.mobilexweb.com/go/ 
performance 并 订阅 Steve Souders 的 博客 http://stevesouders.com。 





对 jQuery 核心 来 说 ， 有 一 些 可 选择 的 CDN: 

。 官方 jQuery CDN; 

。 微软 jQuery CDN (http://www.asp.net/ajaxlibrary/CDN.ashx ) ; 

* Google AJAX 库 接 口 (http://code.google.com/apis/libraries/) 。 

写作 本 书 的 时 候 ， 官 方 jQuery CON 和 微软 CDN 都 托管 了 jQuery Mobile 的 文件 。 
使 用 CDN 真 的 很 简单 ， 只 需 复制 粘贴 对 应 的 JavaScript 或 CSS 外 部 文件 的 URL 就 
完成 了 。 


在 http://jquerymobile.com/download/ 可 以 看 到 一 个 可 直接 复制 粘贴 使 用 的 代码 片 
断 ， 看 起 来 像 这 样 : 





«link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery. 
mobile-1.0.min.css" /» 

<script srcz'"http://code.jquery.com/jquery-1.6.4.min.js"»«/script» 

«script src-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"- 
«/script» 


如 果 使 用 自己 的 主题 〈 后 面 的 章节 中 有 介绍 ) ， 则 需要 使 用 下 面 的 代码 : 


«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery. 
mobile.structure-1.0.min.css" /» 


<!-- 这 儿 放 置 我 们 的 主题 css 文件 --> 





«script src-"http://code.jquery.com/jquery-1.6.4.min.js"»«/script» 
«script srcz'"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"- 
«/script» 
如 上 所 示 ， 只 需 引 入 三 个 托管 在 code.jquery.com 的 压缩 版 外 部 资源 即 可 ， 不 需要 下 
载 图 片 、CSS X JavaScript 代码 等 东西 即 可 开始 使 用 。 记 得 检查 下 网 站 上 可 用 的 最 
新 版 本 。 





最 新 构建 版 本 
如 果 希 望 总 是 使 用 最 新 版 的 jQuery Mobile, jQuery CDON 也 提供 了 对 应 资源 ， 可 直 
接 租 入 代码 。 记 住 ， 这 些 版 本 会 自动 更 新 ， 所 以 尽管 你 的 代码 现在 能 正常 工作 ,但 
未 来 却 可 能 出 现 问题 。 这 个 选择 一 般 用 于 开发 或 测试 ， 不 要 忘 了 ， 它 可 能 包含 不 稳 
定 的 开发 代码 。 











使 用 最 新 构建 版 本 的 代码 如 下 : 


«link href-"http://code.jquery.com/mobile/latest/jquery.mobile.min.css" 
rel="stylesheet" type="text/css" /> 

<script src-"http://code.jquery.com/jquery-1.6.4.min.js"»«/script» 

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"> 
</script> 


使 用 最 新 开发 构建 版 本 的 好 处 是 可 以 使 用 那些 在 最 新 的 生产 版 本 中 还 没有 的 新 特性 。 


2.1.4. 主 HTML5 模 板 

要 创建 jQuery Mobile Web 应 用 ， 只 需 创 建 一 个 空 的 HTMLS 文件 。 如 果 之 前 没 写 
过 HTML5 文档 的 话 也 不 要 担心 ， 这 很 容易 ， 和 写 HTML 4.01 文件 很 像 。 

HTML5 文件 的 DOCTYPE (文档 的 第 一 行 ) 非常 简单 : <!DOCTYPE html>» 


另 一 个 改变 是 head 标签 中 的 meta charset 标签 ; «meta charset-"utf-8" />。 


限于 篇 幅 ， 本 书 无 法 深入 讨论 自 HTML 4.01 的 改变 ， 不 过 就 目前 来 说 ， 这 些 改变 在 
一 些 不 支持 HTMLS 但 是 能 运行 jQuery Mobile 的 老 设 备 上 也 是 兼容 的 。 


如 果 使 用 CS5 及 更 新 版 本 的 Dreamweaver， 可 以 从 新 文档 窗口 的 文档 

4: . 类 型 下 拉 列 表 中 选择 HTMLS 来 创建 一 个 HTMLS 空 模板 。 如 果 你 的 

一 4 Dreamweaver 没有 这 个 选项 ， 则 需要 先 通 过 Adobe.com 网 站 或 Adobe 升级 
程序 下 载 11.0.3 或 之 后 的 更 新 。 
































jQuery Mobile 开发 团队 官方 推荐 将 相关 的 JavaScript 及 CSS 资源 包含 在 head 标签 
中 (自己 托管 或 基于 CDN)， 再 添加 一 个 视 口 (viewport) meta 标签 











<!DOCTYPE html» 
<html> 


<head> 

<meta charset="utf-8" /> 

<title>Your Title</title> 

<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 

«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 

<script type="text/javascript" 
src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"> 


</script> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
</body> 
</html> 








这 就 可 以 了 ! 我 们 刚刚 创建 了 一 个 空 jQuery Mobile 文档 。 当 然 ， 它 的 body 中 还 没 
有 内 容 ， 稍 后 我 们 会 回来 继续 完成 它 。 





1. 视 口 

视 口 (viewport) 是 页 面 所 占 的 区 域 。 可 以 指定 它 的 宽度 和 高 度 ， 它 可 以 比 屏幕 的 
全 部 可 见 区 域 更 大 或 更 小 ， 这 正 是 移动 浏览 器 的 比例 或 缩放 特性 的 用 武之 地 。 创 建 
一 个 移动 友好 的 网 站 时 ， 它 应 该 不 需要 缩放 ， 或 者 说 它 的 默认 宽度 与 设备 屏幕 可 见 
区 域 的 宽度 相同 ， 这 时 可 以 告诉 浏览 器 使 用 1 :1 ( 视 口 区 域 : 可 见 区 域 ) 的 比例 。 
让 我 们 看 看 图 2-1， 其 中 显示 了 iOS 上 的 jQuery Mobile 如 果 不 指 定 视 口 会 怎么 样 。 
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2-1; jQuery Mobile 中 ， 需 要 定义 一 个 视 口 meta 标签 ， 以 免 加 载 Web 应 用 时 出 现 这 种 
UI 问题 
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jQuery Mobile 的 alpha 版 本 曾经 会 自动 添加 视 口 定 义 标签 。 如 果 你 正在 迁 
E 移 一 个 使 用 jQuery Mobile alpha 版 的 老 Web 应 用 ， 记 得 要 在 页 面 中 添加 视 


O meta 标签 。 

















适用 于 jQuery Mobile 的 典型 视 口 meta 标签 类 似 这 样 : 
«meta name-"viewport" content-"width-device-width, initial-scale-1"- 
也 可 以 指定 禁止 用 户 改变 页 面 比例 (使 用 手势 或 按钮 ) : 


«meta name-"viewport" content-"width-device-width, initial-scale-1, 
user-scalable-no"- 


2. JavaScript T SE 

在 继续 完成 我 们 的 Web 应 用 之 前 ， 需 要 讨论 一 下 性 能 问题 。 网 站 性 能 优化 (WPO) 
领域 有 一 个 广为人知 的 经 验 ， 即 从 性 能 的 角度 看 ， 在 head 中 插入 外 部 脚本 标签 是 
不 好 的 。 这 绝对 正确 ， 可 以 读 一 下 Steve Souders 的 精彩 著作 《高 性 能 网 站 建设 指 
南 》 (High Performance Web Sites) , 





不 过 ， 从 jQuery Mobile 的 角度 来 看 ， 把 两 个 脚本 (jQuery 和 jQuery Mobile) 移 到 
HTML 文件 尾部 的 做 法 会 带 来 一 个 不 想 要 的 结果 : 在 框架 下 载 并 执行 完成 之 前 的 一 
小 段 时 间 里 ，Web 应 用 将 先 显示 无 CSS 样式 的 HTML， 就 算 我 们 把 CSS 文件 放 在 
head 中 还 是 会 这 样 。 
这 是 jQuery Mobile 框架 中 使 用 的 渐进 增强 方法 造成 的 。 没 有 对 应 的 JavaScript， 相 
关 的 CSS 文件 对 演 染 毫 无 作用 ，。 


因此 ， 最 好 把 它们 都 放 在 head 中 ， 即 使 这 样 会 造成 一 点 性 能 损失 也 是 必要 的 。 














2.2 Adobe Dreamweaver 的 支持 


自 CS5.5 版 开始 ，Adobe Dreamweaver 工具 中 内 置 了 对 jQuery Mobile 的 官方 支持 。 
可 以 从 http://www.adobe.com/go/dreamweaver 下 载 免费 试用 。 








Dreamweaver CS5.5 的 第 一 个 版 本 包含 了 jQuery Mobile alpha 3， 而 不 是 
C 最 新 发 布 的 版 本 。 可 以 在 http://mobilexweb.com/go/dwjqm 查看 如 何 更 新 到 
最 新 版 本 的 介绍 。 可 以 总 是 以 alpha 3 版 本 开始 ， 然 后 手工 把 它 改 为 最 新 版 
Æ. Dreamweaver 的 后 续 版 本 中 将 包含 它 发 布 时 jQuery Mobile 的 最 新 稳 
定 版 本 。 









































官方 支持 中 包括 创建 一 个 使 用 jQuery Mobile 的 页 面 。 要 实现 这 一 点 ， 只 需 打 
Jf Dreamweaver, WERKE “X” > “新 建 ”"， 选 择 “ 从 模板 新 建 ”> Mobile 
Starters， 接 下 来 就 可 以 从 以 下 三 个 模板 中 选择 了 ( 见 图 2-2) : 


。 CDN 上 的 jQuery Mobile; 
。 使 用 本 地 文件 的 jQuery Mobile; 
。 使 用 本 地 文件 的 jQuery Mobile， 包 括 PhoneGap 支持 (本 书后 面 的 章节 会 涉及 )。 





Sample Page: 








jQuery Mobile (Local) 
jQuery Mobile (PhoneGap) 









































Uses files located on a remote server. 
































2-2; Dreamweaver CS5.5 版 开始 支持 从 头 创 建 jQuery Mobile 模板 
每 个 模板 都 以 一 个 jQuery Mobile 文档 开始 ， 带 有 四 个 相互 连接 的 页 面 。 





fi Fl Dreamweaver 最 大 的 好 处 不 是 模板 ， 而 是 代码 语法 助手 。 键 入 data- 就 可 以 
得 到 所 有 可 能 的 jQuery Mobile data-* 值 的 列表 ， 或 者 得 到 所 有 data-* jQuery 
Mobile 属性 (至 少 需 要 alpha 3 及 以 后 的 版 本 ) 的 列表 。 
"e 使 用 Dreamweaver CS5.5 及 更 新 版 本 的 多 屏 预 览 方法 ， 可 以 看 到 jQuery 
心 . Mobile 是 如 何 适 应 不 同 的 屏幕 尺寸 及 方向 的 ， 包 括 智 能 手机 和 平板 电脑 。 

ASN 
在 “插入 ”菜单 下 还 有 一 个 叫 “jQuery Mobile” 的 新 选项 ， 其 中 包含 本 书 中 讲 到 的 
大 多 数 UI 组 件 的 代码 片断 。 
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预览 文件 
想 在 Dreamweaver 中 查看 jQuery Mobile 的 实际 效果 ， 需 要 使 用 实况 视图 (Live 
View) 功能 ， 如 图 2-3 所 示 。 





0,0.0 f jQM1.html 
“Code Design] [Live Code) p% [d uve view] inspect] M, 图. ( Multiscreen |e) C3... © mite: [Query Mobile Web App 
向 中 QD y Address: [file:///Unsaved Document (3 


jauery.mobile-1.0a3.min.css —jquery-lS.minjs 。 jquery.mobile-1.023.min.js 
«IDOCTYPE html» 








pr] 


als Page One 


<head> 
«meta charset-"UTF-8"» Page Two 
«title»jQuery Mobile Web App«/title» 
«link href- 

"http: //code. jquery.com/mobile/1.0a3/jqu 
ery.mobile-1.0a3.min.css" rel= 
"stylesheet" type-"text/css"/» Page Four 
«script src- 
"http: //code. jquery.com/jquery-1.5.min.j Page Footer 
s" type-"text/javascript"»«/script» 
«script src- 

"http: //code. jquery.com/mobile/1.0a3/jqu 
ery.mobile-1.0a3.min.js" type= 
"text/javascript"»«/script» 

</head> 

<body> 


Page Three 


24€ oo ë 


S 
© 


<div data-role="page" id="page"> 
<div data-role="header"> 
«hi»Page One«/hi» 
di 


fs 
9 
7» 
fa 
Q 
g 
区 
F 
B 

y 





[100% $ [557x4718 [6K / 1 sec [Unicode 6.0UTF-8| —// 











2-3: 可 以 使 用 Dreamweaver 中 的 实况 视图 查看 jQuery Mobile 的 实际 效果 


2.3 ”架构 

jQuery Mobile 使 用 一 种 非常 简单 但 极为 强大 的 方法 来 定义 Web 应 用 的 内 容 。 我 
们 已 经 讨论 过 ，jQuery Mobile 框架 使 用 的 是 一 种 非 介 入 性 方法 ， 这 意味 着 我 们 的 
HTML 文档 甚至 在 jQuery Mobile 没有 正常 加 载 时 也 能 工作 。 





jQuery Mobile 框架 的 主要 单位 是 页 面 (page)。 这 个 页 面 是 不 是 和 普通 的 HTML 文 
件 一 样 ? 不 是 的 。 让 我 解释 一 下 ， 一 个 页 面 仅仅 是 一 个 带 有 指定 role 属性 的 aiv 
元 素 。 一 个 HTML 文档 能 包含 一 个 页 面 ， 也 能 在 同一 个 文件 中 包含 很 多 个 页 面 。 对 
大 多 数 Web 设计 师 来 说 这 是 一 个 新 概念 。 


使 用 简单 的 HTML 标签 ， 比 如 a 标签， 我 们 可 以 连接 到 同一 个 HTML 文档 中 的 页 
面 ， 也 能 连接 到 外 部 HTML 文档 中 的 页 面 。 
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与 卡片 类 似 
在 移动 互联 网 领域 ,在 一 个 文档 中 谋 入 多 个 页 面 的 做 法 已 经 有 10 多 年 的 历史 了 。 
现在 已 经 废弃 的 WML (Wireless Markup Language， 无 线 标记 语言 ) 标准 允许 在 
同一 个 文档 中 插入 多 个 可 视 页 面 ， 目 的 是 减少 延迟 及 下 载 时 间 。jQuery Mobile 继 
承 了 这 个 思想 ， 不 过 用 的 是 普通 的 HTML 和 JavaScript。 











在 WML 世界 里 ， 每 个 页 面 被 称 为 一 个 卡片 (card)， 一 个 WML 文档 则 被 称 为 一 
面板 (deck), WML 文件 使 用 cara 标签 来 定义 文档 中 的 页 面 ， 而 jQuery Mobile 
常 使 用 带 有 特定 role 属性 的 div 标签 。 





2.3.1 角色 

jQuery Mobile 使 用 标准 的 HTML 标记， 如 aiv 标 签 。 需 要 在 这 个 div 上 定义 
个 角色 ( 即 role 属性 )， 以 便 告 诉 框架 如 何 处 理 它 。jQuery Mobile 中 使 用 属 
data-tole 来 定义 role， 例 如 «div data-role="page">。 


jQuery Mobile1.0 中 可 用 的 主要 的 role 见 表 2-1， 本 书 将 逐一 讲解 它们 。 


个 


un 


1H 

















性 





自 定义 data-* 属 性 
HTML5 中 有 一 个 (由 W3C 标 准 定义 的 ) 名 为 自 定义 数据 属性 的 特性 ， 可 用 来 在 
标签 上 添加 任何 形 如 data-<something> 或 data-* 的 自 定义 属性 ， 同 时 保持 文 
档 符 合 HTML 规 范 。 这 个 在 不 破坏 标签 的 有 效 性 的 同时 为 其 添加 自 定义 元 数据 的 
特性 很 有 用 。 
jQuery Mobile 经 常 使 用 这 个 特性 来 定义 用 于 框架 的 自 定 义 属性 。 不 要 困惑 ， 
aata-zrole 不 是 HTML5 的 新 属性 ， 它 只 是 框架 与 我 们 之 间 的 一 个 默认 契约 。 
自 定义 属性 最 大 的 好 处 是 它们 在 不 支持 HTML5 的 浏览 器 上 也 能 工作 ， 不 会 出 现 
严重 问题 。 
如 果 你 使 用 的 是 Adobe Dreamweaver CS5.5 及 之 后 的 版 本 ， 在 一 个 HTML 元素 中 键 
入 data- 时 即 可 看 到 自动 的 jQuery Mobile 提 示 。 











表 2-1: jQuery Mobile 1.0 中 可 用 的 主要 role 















































role H yk 
page 定义 一 个 页 面 ， 这 儿 的 页 面 是 jQuery Mobile 中 用 于 显示 内 容 的 单位 
header 页 面 的 头 部 
content 页 面 的 内 容 


































































































role 描 
footer 页 面 的 页 脚 
navbar 定义 一 个 导航 条 ,一般 位 于 header 中 
button 泻 染 为 一 个 可 视 化 的 按钮 
controlgroup 泻 染 一 个 组 件 
collapsible 页 面 中 可 折 又 的 内 容 面 板 
collapsible-set | 一 组 可 折 县 的 面板 (手风琴 布局 ) 
fieldcontain 用 于 表单 域 的 容器 
listview 由 多 项 内 容 组 成 的 列表 
dialog 对 话 页 面 
slider 用 于 布尔 值 的 可 视 化 请 块 
nojs 在 兼容 jQuery Mobile 的 浏览 器 上 会 被 隐藏 的 元 素 
2.3.2 主题 














jQuery Mobile 使 用 一 个 强大 的 主题 机 制 来 定义 用 户 界 面 的 可 视 化 展现 。 主 题 及 其 自 
定义 会 在 本 书后 面 的 章节 讲解 ， 但 有 一 个 重要 概念 现在 就 应 该 知道 : 主题 中 的 每 一 
个 UI 元 素 (如 页 面 、 按 钮 或 组 件 ) 都 可 以 使 用 不 同 的 色 卡 (swatch), 


Aa 





主题 。 


所 谓 主题 ， 是 指 一 组 对 排版 、 样 式 以 及 颜色 的 定义 。 每 个 主题 都 包含 一 组 色 卡 ， 在 


W 用 于 创 到 











直到 1.0 hk, jQuery Mobile 还 只 包含 了 一 个 默认 主题 ， 不 过 在 http:// 
n^ . jquerymobile.com/themeroller 有 一 个 主题 定制 器 (一 个 在 线 Web 应 用 ， 可 
EE 自己 的 主题 )， 通 过 它 无 需 直 接 编辑 CSS 文件 即 可 以 定义 自己 的 








应 用 中 我 们 可 以 随时 修改 这 些 色 卡 。 色 卡 为 元 素 显示 提供 了 不 同 的 选择 。 色 卡 由 a 
到 z 的 字母 定义 ， 黑 认 主 题 包含 了 从 a 到 e 的 定义 ， 为 自 定 义 色 卡 预 留 了 很 多 字母 。 


表 2-2 列 出 了 图 2-4 中 的 颜色 对 应 的 色 卡 约定 。 





表 2-2: 色 卡 约定 






































字 oH 描 述 默认 主题 的 颜色 
a 最 高 视觉 优先 级 (一 般 用 于 工具 条 ) E 
b 次 高 视觉 优先 级 蓝 
c 基本 优先 级 (适用 于 大 多 数 情况 的 默认 色 卡 ) 银 
d 次 高 优先 级 的 替代 方案 灰 
e 强调 黄 














在 jQuery Mobile HTML 元 素 上 定义 色 卡 使 用 aata-tneme 属性 ， 值 为 一 个 字母 ， 
例如 : data-theme-"e" 表示 使 用 强调 色 卡 。 











<€ ButtonA 
《 Button B 
Q Button C BarC 
Q Button D Bar D 














图 2-4: 从 a 8l e 的 默认 主题 


一 般 来 说 ，Web 应 用 中 大 多 数 元 素 的 色 卡 都 可 以 修改 ， 如 页 面 、 列 表 、 按 钮 、 元 
素 、 表 单元 素 以 及 工具 条 。 如 果 不 想 同时 修改 所 有 同类 元 素 ， 就 可 以 使 用 色 卡 来 高 
亮 一 个 元 素 而 不 影响 其 他 元 素 。 


色 卡 使 用 层 县 机 制 ， 就 是 说 ， 如 果 一 个 容器 元 素 定 义 了 一 个 色 卡 ， 除 非 另 有 定义 ， 
否则 它 的 子 元 素 也 将 使 用 这 个 色 卡 。 





2.3.3 页 面 
我 们 知道 ， 页 面 是 jQuery Mobile 的 主要 单位 。 一 个 典型 的 页 面 可 分 为 页 头 、 内 容 、 
页 脚 三 个 部 分 ， 其 中 只 有 内 容 部 分 是 必 不 可 少 的 。 各 个 部 分 使 用 带 对 应 role 的 aiv 
标签 声明 : 
«div data-role-"page"- 
«div data-role-"header"- 


«/div» 
«div data-role-"content"- 


«/div» 
«div data-role-"footer'"- 


«/div» 
«/div» 


包括 页 面 、 页 头 、 页 脚 以 及 内 容 在 内 的 各 个 部 分 都 可 以 各 自从 当前 主题 中 选择 一 个 
色 卡 。 








只 有 一 个 页 面 的 文档 可 以 不 添加 page-role 元 素 ， 这 时 框架 会 自己 添加 。 
不 过 最 好 还 是 加 上 ， 这 会 让 代码 更 加 清晰 ， 同 时 将 来 有 修改 时 也 更 安全 。 





图 2-5 显示 了 一 个 典型 jQuery Mobile 文档 的 图 解 。 记 住 页 面 需要 放 在 一 个 引入 了 
jQuery Mobile 的 HTML5 文档 的 body 中 。 








jQuery Mobile HTML5 Document 


Content 











2-5: jQuery Mobile 文档 中 的 一 个 典型 页 面 ， 其 中 包含 了 页 头 、 内 容 区 以 及 一 个 可 选 的 页 脚 


大 多 数 设 备 上 jQuery Mobile 都 可 以 自行 管理 方向 (纵向 或 横向 )， 并 自动 调整 UI 
以 适应 视 口 。 
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^n 
aS 可 以 使 用 值 为 nojs 的 role 来 提供 只 在 B 级 或 C 级 浏览 器 上 显示 的 内 容 ， 
p^ . 如 «div data-role-"nojs"», 这 些 内 容 在 A 级 浏览 器 上 会 自动 隐藏 。 
4 





在 基于 Android, webOS 以 及 iOS 等 的 兼容 设备 上 ，jQuery Mobile 会 尝试 操作 初始 
滚动 位 置 以便 隐 藏 浏览 器 地 址 栏 ， 这 会 让 应 用 的 外 观 和 感觉 更 像 原生 应 用 。 不 过 ， 
只 有 在 内 容 足 够 高 可 以 填 满 可 见 区 域 时 这 个 方法 才 管用 ， 否 则 ， 地 址 栏 始 终 会 显示 。 





1. 页 头 与 页 脚 

在 页 头 和 页 脚 可 以 播 入 任何 HTML. 内 容 ， 但 由 于 标准 jQuery Mobile 样式 表 的 限制 ， 
最 好 在 页 头 中 使 用 h1， 在 页 脚 中 使 用 h4， 以 便 取 得 最 好 的 UI 泻 染 效果 。 本 书后 面 
的 章节 会 讲 到 如 何 自 定 义 这 些 UI, 


页 脚 是 可 选 的 ， 不 过 在 Web 应 用 的 导航 UI 中 页 头 通常 是 必需 的 。 页 头 结构 已 经 被 
预定 义 并 划分 为 三 个 子 区 域 : 左 侧 、 标 题 以 及 右 侧 。 

后 面 我 们 会 涉及 左 侧 及 右 侧 区 域 ， 现 在 只 需要 知道 它们 用 于 放置 操作 按钮 。 

jQuery Mobile 会 自动 从 hx 标签 (如 ni R n2 元素 ) 中 提取 标题 。 可 显示 标题 的 空 
间 是 有 限 的 ， 如 果 标 题 太 长 ， 它 会 被 自动 截断 。 在 大 多 数 兼容 设备 上 ， 被 截断 的 标 
题 末尾 会 显示 省 略 号 ， 如 图 2-6 所 示 。 页 脚 也 有 相同 的 行为 。 





file:///Applications/xam... © 


This title is too l... 


file:///Applications/xampp/xamppfiles/... Cj 


This title is too large for some screens 

















2. 内 容 
内 容 区 域 可 以 包含 任意 HTML. 代码 。 一 般 我 们 会 使 用 一 些 框架 自 带 的 带 样式 的 控 
件 ， 如 按钮 、 列 表 或 表单 。 


图 2-7 显示 了 改进 后 的 示例 : 


«div data-role-"page"- 


«div data-role-"header"» 
«hi»Our first webapp«/h1» 
«/div» 
«div data-role-"content"- 
<p>This is the main content of the page«/p» 
«/div» 
«div data-role-"footer"- 
«h4»More on mobilexweb.com«/h4» 
«/div» 


«/div» 





This is the main content of the page 





d [RR [m 











图 2-7: 默认 情况 下 ， 每 个 role (页 头 、 内 容 、 页 脚 ) 都 有 一 个 漂亮 的 iOS 风格 的 外 观 


| jQuery Mobile 样式 表 无 法 处 理 那些 在 页 面 之 内 ， 但 在 页 头 、 内 容 或 页 脚 之 
外 添加 的 内 容 ， 如 果 不 手 工 处 理 ， 这 些 内 容 就 会 成 为 UI 错误 。 





2.4 导航 
页 面 间 的 导航 使 用 标准 a 元 素 即 可 ，jQuery Mobile 会 神奇 地 把 剩 下 的 事情 搞定 。 
首先 ， 有 这 么 几 种 超 链接 类 型 : 
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。 链接 到 同一 个 文档 (这 种 文档 被 称 为 多 页 面 文档 ) r5 7 VURBBSPNSDSERE: 
。 链接 到 另 一 个 jQuery Mobile 文档 中 的 页 面 的 外 部 链接 ， 

。 链接 到 韭 jQuery Mobile 文档 的 绝对 链接 ， 

。 移动 应 用 专 有 链接 。 


jQuery Mobile 页 面 之 间 的 链接 (前 两 种 类 型 ) 有 两 种 特别 的 链接 行为 : 


。 在 支持 的 设备 上 (A iOS 及 基于 Android 的 设备 )， 显 示 页 面 间 的 切换 动画 ，; 
。 在 浏览 器 中 (而 不 是 在 无 边框 的 本 地 应 用 中 ) 运行 时 ， 点 击 浏览 器 的 后 退 按 钮 会 
返回 第 一 个 页 面 。 


jQuery Mobile 的 一 个 很 棒 的 特性 是 它 能 监听 浏览 器 的 后 退 按钮 ， 并 在 其 被 点 击 时 给 
我 们 一 个 明确 的 后 退 导航 选项 。 一 些 设备 (如 基于 Android 及 BlackBerry 的 设备 ) 
有 硬件 后 退 按钮 ， 它 们 照样 可 用 于 返回 前 一 个 页 面 。 

















oa 
4 多 页 面 文档 中 ，DOM 中 的 第 一 个 页 面 会 在 第 一 次 加 载 时 显示 。 
int 

















在 后 退 事 件 触发 时 从 第 二 个 页 面 转 到 第 一 个 页 面 的 导航 也 使 用 相同 的 过 渡 效 果 ， 不 
过 顺序 相反 。 


这 种 后 退 模式 的 灵感 来 自 10S 及 其 他 移动 OS 的 用 户 界面 模式 。jQuery Mobile 使 用 
栈 来 维护 用 户 访问 的 页 面 ， 这 样 就 能 随时 返回 任意 访问 过 的 页 面 。 


导航 完全 由 框架 完成 。jQuery Mobile 会 操作 当前 URL， 在 原来 的 URL 后 面 添加 散 
列 值 。 在 有 些 设备 上 ， 这 个 操作 会 产生 一 个 奇怪 的 效果 : 如 果 地 址 栏 处 于 隐藏 状态 ， 
用 户 导 航 到 另 一 个 页 面 时 ， 地 址 栏 会 出 现 一 会 儿 ， 然 后 再 隐藏 。 这 种 效果 只 在 基于 
浏览 器 的 Web 应 用 上 出 现 ， 可 以 使 用 本 书后 面 章节 中 要 介绍 的 全 屏 的 Web 应 用 或 
混合 原生 应 用 来 避免 。 





























2.4.4 后 退 按钮 


在 页 面 上 使 用 data-add-back-btn="true" 属性 将 在 页 头 左 侧 添加 一 个 “后 退 ” 
按钮 。 按 钮 的 颜色 与 色 卡 可 以 分 别 使 用 页 面 上 的 aata-back-btn-text 和 data- 
back-btn-theme 来 设置 。 如 : 





«div data-role-"page" data-add-back-btn-"true" data-back-btn-text-"Previous" 
data-back-btn-theme-"e"- 


«/div» 
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每 个 浏览 器 都 提供 了 一 个 后 退 按 钮 ， 有 些 是 触摸 按钮 形式 ， 有 些 是 硬件 按 
心 . 键 形式 。 因 此 ， 创 建 基 于 浏览 器 的 体验 而 不 是 无 边框 的 Web 应 用 (如 安装 
到 本 地 的 Web 应 用 ) 时 ， 再 为 后 退 创建 一 个 可 见 的 按钮 是 一 种 重复 劳动 ， 
而 且 会 占用 宝贵 的 屏幕 空间 。 不 过 创建 安装 到 本 地 的 无 边框 的 Web 应 用 
时 ， 则 总 是 应 该 包含 一 个 可 见 的 后 退 按钮 。 
































2.4.2 ”内 部 页 面 链接 

前 面 提 到 过 ， 一 个 jQuery Mobile 文档 可 以 包含 多 个 页 面 。 要 实现 这 一 点 ， 可 以 将 
这 些 页 面 添 加 为 body 的 子 元 素 ， 每 个 页 面 都 需要 使 用 标准 HTML 方法 定义 一 个 ia 
( 即 HTML 元 素 的 id 属性 )， 这 样 jQuery Mobile 就 可 以 访问 它们 了 。 

在 链接 的 href 属性 中 使 用 #<id> 即 可 创建 指向 当前 文档 中 的 其 他 页 面 的 链接 ， 这 
儿 的 «ia» 即 目标 页 面 的 id， 例 如 :， <a href="#next">。 








外 部 页 面 的 链接 必须 与 当前 页 面 同 域 ， 或 者 与 当前 页 面 在 同一 个 本 地 应 用 
AED 的 包 里 。 对 于 那些 指向 不 同 域 的 文档 的 链接 ， 除 非 在 JavaScript 中 开启 了 
跨 域 AJAX 加 载 ， 否 则 这 些 链 接 将 被 当 作 绝 对 外 部 链接 。 














默认 情况 下 ，jQuery Mobile 使 用 文档 的 title 元素 的 内 容 作 为 浏览 器 的 标题 。 标 题 对 
基于 浏览 器 的 应 用 很 有 用 ， 它 会 显示 在 某 些 浏 览 器 的 顶部 ， 另 外 ， 在 用 户 将 当前 页 
面 添加 为 书签 时 也 会 用 到 标题 。 可 以 指定 页 面 的 可 选 属性 gata-title， 以 便 用 户 
访问 内 部 页 面 时 更 新 标题 。 


来 看 一 个 例子 (参见 图 2-8) : 








«body» 
«div data-role-"page" id-"pagel"- 


«div data-role-"header"» 
«hl»First page</hi> 
</div> 
<div data-role="content"> 
<p>This is the main content of the page.</p> 
<p>You can go to the <a href="#page2">second page«c/a».«/p» 


</div> 

<div data-role="footer"> 
<h4>mobilexweb.com</h4> 

</div> 


</div> 








«div data-role-"page" id-"page2" data-title-"This is the second page"- 


«div data-role-"header"- 
«hl»Second page</h1> 
«/div» 
«div data-role-"content"-» 
<p>This is the main content of the second page</p> 
«p»You can go back using the header's button, «a href="#pagel"> 
clicking here</a> or using your browser's back button. 
«/div» 
«div data-role-"footer"- 
«h4»mobilexweb.com«c/h4» 
«/div» 


«/div» 


</body> 





Second page 


mobilexweb.com 


mobilexweb.com 














图 2-8: 在 内 部 页 面 之 间 导 航 很 容易 ， 跳 转 使 用 的 是 标准 链接 标签 


整个 Web 应 用 可 以 只 放 在 一 个 HIML 文档 里 吗 ? 如 果 不 需要 动态 内 容 ， 当 然 是 可 
以 的 。 不 过 要 记 住 ， 在 一 个 文档 中 符 入 多 个 页 面 时 ， 即 使 用 户 看 不 见 所 有 页 面 ， 他 
也 必须 把 这 个 文档 完整 地 下 载 下 来 。 我 们 需要 在 性 能 与 可 用 性 之 间 找 到 一 个 平衡 ， 
从 而 决定 在 一 个 文档 中 应 该 包含 多 少 页 面 。 


图 2-9 展示 了 一 个 内 部 页 面 导航 的 图 解 。 








<head> 





<body> 


—> #second 


#second 
#secohd 






98ed 1uelin9 


Content 
—> other 


Teei —> #first 





Navigation Stack 


JE 
图 2-9: 在 内 部 页 面 之 间 导 航 时 ， 每 个 向 前 的 链接 将 在 访问 历史 (一 个 栈 ) 中 添加 一 条 记录 ， 
每 个 后 退行 为 则 从 中 移 除 最 后 一 条 记录 

















可 以 在 网 站 上 保存 状态 数据 ， 了 解 用 户 可 能 会 访问 哪些 页 面 ， 以 便 将 它们 预 加 载 到 
同一 个 文档 中 。 


jQuery Mobile 会 自动 将 指向 前 一 个 页 面 的 链接 的 行为 转换 为 后 退 ， 点 击 时 
uM a. Z os RIBUS E, ANZ EDU V 2x 1318] DJ EPR. And i8 
一 个 链接 的 行为 是 后 退 ， 可 以 在 这 个 a 7638 ERI data-rel-"back" 属 
性 。 
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2.4.8 外 部 页 面 链接 

如 果 不 想 将 一 个 页 面 与 第 一 个 页 面包 含 在 同一 个 文档 中 ， 或 者 内 容 需 要 动态 地 创建 
(例如 使 用 PHP 或 其 他 服务 端 代 码 ) ， 则 可 以 使 用 标准 的 a 标签 链接 到 另 一 个 jQuery 
Mobile HTML 文档 。 








«a href="otherDocument .html">Gotonextpage</a> 


这 就 完成 了 ，jQuery Mobile 会 自动 处 理 上 面 这 种 链接 ， 它 的 访问 体验 与 内 部 链接 非 
党 类 似 。 





外 部 页 面 与 当前 页 面 必须 在 同一 个 域名 下 ， 或 者 在 同一 个 本 地 应 用 的 包 中 。 
指向 其 他 域名 的 链接 将 被 当 作 绝对 外 部 链接 处 理 。 

















唯一 的 区 别 是 ，jQuery Mobile 会 使 用 AJAX 方式 请 求 这 个 文档 ， 解 析 它 的 内 容 ， 
将 对 应 的 页 面 添加 到 当前 DOM 中 ， 再 平滑 地 过 渡 到 这 个 新 页 面 。 请 求 正在 进行 
时 ， 用 户 会 看 到 一 个 旋转 的 、 表 示 正 在 加 载 的 漂亮 图 标 ， 如 图 2-10 所 示 。 记 得 使 用 
data-title， 以 便 新 页 面 加 载 后 能 更 新 浏览 器 的 标题 。 





Carrier F 3:17 PM [一 
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loading 
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& 2-10: 链接 到 外 部 jQuery Mobile 页 面 时 ， 请 求 页 面 加 载 的 时 间 如 果 过 长 ， 框 架 会 自动 显 
示 一 个 旋转 图 片 的 动画 
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让 我 们 再 来 梳理 一 下 。jQuery Mobile 在 页 面 上 发 现 一 个 链接 时 ， 它 首先 判断 这 个 链 
接 是 内 部 链接 (以 散 列 字 符 # 开始 ) 还 是 外 部 链接 。 如 果 是 个 外 部 链接 并 且 没 有 定 
X. rel EX target 属性 (就 像 我 们 上 面 写 的 例子 一 样 ) ， 它 将 捕获 对 这 个 链接 的 点 
击 事件 ， 向 链接 的 href 文档 发 起 一 个 AJAX 请 求 ， 同 时 显示 一 个 模 态 的 进度 窗口 。 
请 求 完成 时 ，jQuery Mobile 会 将 加 载 的 页 面 添加 到 当前 DOM 中 并 转向 它 ， 就 像 它 
是 个 内 部 页 面 一 样 。 

«e 对 那些 不 支持 jQuery Mobile 的 浏览 器 ， 外 部 链接 将 像 正 常 的 HTML 链接 
4a. 一 样 工作 ， 不 会 有 任何 问题 ， 因 为 作为 标准 的 a 标签 ， 这 本 来 就 是 它们 的 

O 功 能 。 这 就 是 渐进 增强 的 力量 。 





jQuery Mobile 会 自动 使 用 一 个 新 的 ID (由 该 页 面 与 原始 文档 的 相对 URL 定义 ) 将 
外 部 加 载 的 页 面 添加 到 当前 DOM 中 。 因 此 ， 如 果 在 这 个 jQuery Mobile 文档 仍然 驻 
留 在 浏览 器 中 时 用 户 又 访问 了 这 个 页 面 ， 它 将 是 已 经 “在 台 上 ”的 状态 。 这 个 操作 
见 图 2-11。 
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图 2-11; jQuery Mobile 会 把 通过 AJAX 加 载 的 外 部 链接 页 面 插入 到 原始 文档 的 DOM 中 ， 
这 样 再 次 访问 这 个 页 面 时 它 将 处 于 已 预 读 取 状 态 
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URL 5jQuery Mobile 的 导航 


在 一 些 设备 上 ，jQuery Mobile 使 用 散 列 导航 (#<id>) 来 在 页 面 之 间 移 动 。 
此 ， 在 jQuery Mobile 文 档 中 ， 用 于 在 同一 个 页 面 中 滚动 的 HTML 锚 点 导航 将 不 能 
EAE. 

模拟 这 个 特性 需要 用 JavaScript。 在 不 兼容 的 设备 上 ， 内 部 页 面 会 同时 全 部 显 
示 ， 内 部 链接 则 会 像 普通 的 HTML 锚 点 导航 链接 那样 工作 。 

有 一 些 移动 浏览 器 支持 访问 历史 API (HTML5 新 API 之 一 ) ,该 API 允 许 网 站 在 
不 刷新 整个 页 面 的 情况 下 改变 整个 URL。jQuery Mobile 会 在 支持 的 浏览 器 上 使 用 这 
个 API， 在 这 些 浏览 器 上 访问 外 部 链接 时 ， 即 使 内 容 是 通过 AJAX 加 载 的 ， 浏 览 器 
的 URL 地 址 栏 仍然 会 被 改变 为 完整 的 目标 URL， 而 不 是 仅仅 改变 散 列 导航 #<id>。 











有 很 多 种 原因 可 能 导致 AJAX 请 求 失败 ， 如 服务 器 错误 、URL 找 不 到 、 连 接 失 败 ， 
或 者 设备 的 网 络 问题 。 如 果 无 法 加 载 目 标 页 面 ， 用 户 将 看 到 一 个 类 似 图 2-12 中 所 示 
的 错误 警告 。 在 本 书后 面 的 章 市 我 们 将 学 习 如 何 定 制 这 个 错误 消息 。 





First page 




















AJAX 还 是 Hijax? 


AJAX (本 意 为 异步 JavaScript 与 XML) A- RP RAR, 允许 浏览 器 在 不 改变 
当前 页 面 的 UREL 也 不 阻塞 页 面 UI 的 情况 下 ， 在 后 台 创 建 一 个 到 服务 器 的 请 求 。 
最 初 ，AJAX 请 求 的 数据 格式 为 XML， 但 现在 更 常见 的 情况 是 传输 JSON 格 式 的 
值 ， 划 至 普通 文本 或 HTML。 

jQuery Mobile 在 页 面 导 航 之 间 创 建 AJAX 请 求 ， 并 将 整个 目标 HTML 文 档 作 为 留 
待 后 面 解析 的 普通 文本 ， 同 时 ， 在 文档 源码 中 仍然 有 普通 的 HTML 链接 。 这 种 模 
式 被 称 为 Hijax 技 术 !:， 它 构建 在 渐进 增强 技术 之 上 。 











要 将 外 部 页 面 链接 到 一 个 页 面 中 而 不 出 问题 ， 需 遵守 以 下 规则 。 


。 目标 也 必须 是 一 个 jQuery Mobile 文档 。 

。 目标 必须 与 当前 页 面 在 同一 个 域名 下 。 

。 目标 必须 是 一 个 只 包含 一 个 页 面 的 文档 。 

。 如 果 目 标 URL 是 一 个 文件 夹 (如 /clients) , 则 链接 的 href 属性 必须 以 斜 杠 结尾 ， 
Hl nre£-"/clients/". 

。 不 能 定义 target 属性 ， 如 target-" blank", 














jQuery Mobile Web 应 用 的 生命 周期 一 般 会 包括 一 个 完整 的 HTTP 请 求 

人 Q 4 、 (第 一 个 文档 )， 可 能 要 加 载 许多 内 部 页 面 ， 以 及 可 能 有 许多 对 外 部 页 面 的 

UYO AJAX 请 求 。 除 非 遇 到 绝对 外 部 链接 ， 或 者 是 在 B 级 或 C 级 浏览 器 上 ， 不 
然 不 会 再 有 完整 的 HTTP 请 求 。 





























为 了 避免 与 框架 的 逻辑 冲突 ， 需 要 将 包含 多 个 页 面 的 外 部 文档 当 作 绝对 外 部 链接 处 
理 ， 下 一 市 我 们 会 讨论 这 个 问题 。 


jQuery Mobile 只 会 从 加 载 的 文档 中 取出 第 一 个 页 面 (第 一 个 带 有 role="page" 的 
div)， 其 他 内 容 都 将 被 忽略 。 也 就 是 说 ， 所 有 目标 文档 的 head 元 素 中 的 信息 以 及 
其 他 在 首 个 页 面 元素 之 外 的 内 容 都 将 被 忽略 。 


记 住 ， 其 他 文档 中 岩 入 的 任何 CSS 或 JavaScript， 和 title 元素 一 样 ， 都 将 被 忽 
略 。 那 该 把 它们 删除 吗 ?” 绝 对 不 要 。 别 忘 了 jQuery Mobile 使 用 渐进 增强 技术 ， 在 
那些 不 兼容 的 设备 上 ， 这 些 被 忽略 的 内 容 将 用 于 在 浏览 器 中 加 载 完整 文档。 稍 后 我 
们 会 讨论 如 何 处 理 这 个 限制 。 























译注 1: hijax 5 hijack 谐音 ,hijack 的 意思 是 “ 动 持 ”, 因 此 Hijax 可 理解 为 “ 拦 动 点 击 操作 ,发 送 Ajax 请 求 ”。 
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预 读 并 缓存 页 面 


有 时 我 们 想 在 用 户 选 中 选项 时 立即 显示 下 一 个 页 面 ， 因 此 不 想 使 用 外 部 页 面 。 为 
了 减少 AJAX 的 时 间 ， 我 们 可 以 预 读 一 个 页 面 。 我 们 可 以 告诉 jQuery Mobile 框 架 
哪些 链接 需要 预 读 ， 这 样 这 些 页 面 就 会 在 DOM 中 更 快 就 绪 。 要 实现 这 一 点 ， 只 
需 为 链接 加 上 一 个 布尔 属性 daata-prefetch， 例 如 : 


«a href-'newpage.html' data-prefetch» 转 到 这 个 新 页 面 </a> 


记 住 这 个 特性 应 该 只 在 那些 很 有 可 能 被 点 击 的 链接 上 使 用 。 一 些 好 的 用 例如 : 分 
页 的 文章 、 照 片 画 廊 ( 预 读 下 一 张 图 片 ) 或 者 统计 结果 显示 大 多 数 用 户 会 点 击 的 
链接 。 这 个 特性 会 增加 用 户 的 HTTP 流 量 及 消费 ， 需 谨慎 使 用 。 

为 了 避免 DOM 占 用 过 多 内 存 ， 当 外 部 加 载 页 面 变 得 不 可 见 时 (在 后 退 或 前 进 到 
Ws JQuery Mobilas 自动 从 DOM 中 将 它 移 除 。 要 再 次 显示 这 个 页 
面 时 ，jQuery Mobile 会 尝试 从 缓存 中 恢复 它 ， 如 果 失 败 则 从 服务 器 重新 下 载 。 
如 果 想 强制 指定 一 个 外 部 页 面 不 从 DOM 中 移 除 ， 可 以 在 页 面 元 素 上 指定 属性 
data-dom-cache="true"。 由 于 DOM 的 增长 经 常会 导致 内 存 及 性 能 的 问题 ， 
因此 请 仅 在 确信 用 户 会 再 次 访问 时 才 使 用 这 个 特性 











2.4.4 绝对 外 部 链接 

有 时 我 们 需要 链接 到 另外 的 非 jQuery Mobile 内 容 的 站 点 或 文档 ， 这 时 就 需要 显 式 
定义 一 个 绝对 外 部 链接 。 可 以 通过 在 a 标签 上 添加 data-rel="external" 来 
实现 。 


例如 : 
«a href="http://www.mobilexweb.com" data-rel="external"> 查看 我 的 博客 </a> 


还 有 一 些 情况 下 的 链接 ， 比 如 指定 了 target 属性 或 链接 到 不 同 域名 的 文档 ， 无 论 
这 些 文档 是 不 是 jQuery Mobile 文档 ， 也 都 会 被 当 作 绝对 外 部 链接 处 理 





«a hrefz"http://www.mobilexweb.com" target="_blank"> 查看 我 的 博客 </a> 


«a href-"http://www.otherdomain.com/whatever"» 查看 我 的 博客 </a> 


另 一 个 强制 将 链接 转 为 绝对 外 部 链接 的 方法 是 在 链接 中 使 用 aata-ajax=false 属 
性 〈 对 同一 个 域名 下 的 页 面 很 有 用 ) : 


«a href-"otherpage.html" data-ajax="false"> 别 的 页 面 </a> 








用 户 点 击 (或 用 他 的 手指 轻 击 ) 一 个 绝对 链接 时 ，jQuery Mobile 实例 将 
-ED 被 印 坊 ， 浏 览 器 将 转向 到 指定 目标 。 如 果 想 在 打开 链接 的 同时 保持 jQuery 
Mobile 实例 ， 则 应 该 在 超 链接 中 加 上 target-"_blank"， 大 多 数 支持 多 
页 面 浏览 的 智能 手机 及 平板 电脑 都 支持 这 个 属性 。 























创建 本 地 Web 应 用 时 对 外 部 链接 要 三 思 而 后 用 。 默 认 情 况 下 ， 最 后 的 目标 页 面 会 在 
你 的 Web 应 用 容器 内 (在 你 的 应 用 的 限制 下 ) 打开 ， 这 可 能 并 不 是 你 所 期 望 的 。 例 
如 ， 如 果 你 的 本 地 应 用 没有 提供 后 退 等 导航 按钮 的 话 ， 用 户 可 能 就 没 法 再 回 到 你 的 
应 用 了 。 有 一 些 解决 方案 ， 如 PhoneGap， 会 将 这 个 URL 在 默认 的 浏览 器 中 打开 ， 
同时 关闭 或 最 小 化 你 的 应 用 。 


如 果 是 链接 到 一 个 绝对 外 部 URL 的 jQuery Mobile 文档 ， 一 切 都 会 正常 ， 
e a. 不 过 目标 页 面 将 没有 后 退 按钮 。 目 标 页 面 将 初始 化 一 个 新 的 jQuery Mobile 
实例 。 














后 面 的 章节 我 们 会 讲 到 使 用 jQuery Mobile 开发 本 地 应 用 ， 在 此 之 前 ， 如 何 解 决 这 
个 问题 先 留 给 你 思考 。 


2.4.5 ”移动 互联 网 特有 链接 

不 要 忘 了 我 们 正在 创建 的 是 移动 互联 网 体验 ， 应 该 将 应 用 与 设备 尽 可 能 整合 ， 以 便 
提升 用 户 体验 。 通 过 URI 机制， 我 们 可 以 拨打 电话 或 发 送 短信 ， 我 们 将 在 2.6 节 深 
入 讲解 这 个 功能 。 























Ha 


x3 记 住 对 你 的 网 站 应 用 渐进 增强 模式 。 这 意味 着 应 该 总 是 使 用 标准 的 a 链接 ， 
S a. 
4 











而 不 要 使 用 JavaScript 来 改变 页 面 或 导航 。 使 用 标准 HTML 导航 将 让 你 的 
Web 应 用 在 所 有 移动 浏览 器 场景 中 都 能 工作 。 








2.4.6 ”页 面 间 的 过 渡 效 果 

就 像 之 前 看 见 的 ， 用 户 从 一 个 页 面 转 到 另 一 个 页 面 时 ，jQuery Mobile 会 使 用 一 个 平 
滑 的 动画 过 渡 。 上 默认 情况 下 ， 所 有 的 过 渡 都 使 用 从 右 到 左 的 动画 ， 这 种 动画 模式 在 
从 主干 到 细节 或 普通 到 具体 的 导航 时 非常 有 用 。 在 导航 中 深入 前 进 时 ,会 看 到 从 夺 
到 左 的 动画 ， 返 回 到 之 前 的 页 面 时 ， 则 会 看 到 反 转 效果 从 左 到 右 的 动画 。 





























过 渡 效 果 使 用 了 CSS3， 大 多 数 设备 上 它们 都 已 被 硬件 加 速 。 在 一 些 不 兼容 
ED 的 设备 上 ， 页 面 切换 时 将 没有 动画 。 




















jQuery Mobile 允许 我 们 为 每 个 页 面 切换 指定 使 用 的 动画 过 渡 效 果 。 要 实现 这 一 点 ， 
需要 在 链接 中 使 用 自 定 义 属性 aata-transition。 每 个 过 渡 效 果 都 有 一 个 对 应 的 
用 于 后 退 的 相反 的 效果 。 


可 用 的 过 渡 效 果 如 下 (参见 图 2-13 ) 。 


* glide 


默认 的 从 右 到 左 的 动画 。 


e slideup 
从 下 到 上 的 动画 ， 多 用 于 模 态 页 面 。 


* slidedown 


从 上 到 下 的 动画 。 


* pop 
新 页 面 会 从 屏幕 中 间 的 一 个 小 点 开始 变 大 ， 直 到 占 满 屏幕 


* fade 


老 页 面 与 新 页 面 交 又 淡 入 淡出 渐变 动画 


* flip 
一 个 2D X 3D 旋转 动画 。3D 只 在 一 部 分 设备 上 可 用 ， 如 iOS 设备 。 在 其 他 如 基 
于 Android 的 设备 上 ， 这 个 过 渡 效 果 将 泻 染 为 2D 旋转 ， 这 或 许 并 不 是 你 所 期 望 
的 效果 。 











slide slideUp slideDown 
-— mu s Hn 
À 
fade flip 





图 2-13; jQuery Mobile 1.0 中 支持 的 页 面 过 渡 效 果 
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jQuery Mobile 1.0 中 的 大 多 数 过 渡 效 果 由 jQTouch (http://jqtouch.com) 
心 团队 开发 ， 由 David Kaneda 创建 ， 现 在 由 Jonathan Stark 维护 。 自 1.1 版 
开始 ，jQuery Mobile 正在 改进 过 渡 效 果 ， 另 外 还 添加 了 两 个 新 值 : flow 


和 turn。 

















要 在 链接 上 定义 一 个 新 的 过 渡 效 果 ， 只 需 使 用 data-transition-"name", 例如: 














«a href="#page2" data-transition="pop"> 第 二 个 页 面 </a> 








过 渡 效 果 动画 只 在 A 级 浏览 器 上 的 内 部 链接 或 连 到 jQuery Mobile 页 面 的 
ED 外 部 链接 上 生效 。 对 于 绝对 链接 或 移动 互联 网 专 有 URI 方案 (如 发 送 短 
信 )， 这 些 动画 将 失效 。 











建议 在 页 面 间 使 用 经 典 的 过 渡 效 果 ， 同 时 保持 一 致 的 UI 心 理 模式 。 例 如 ， 在 内 容 
中 深入 或 层级 导航 时 ， 总 是 使 用 sliae 过 渡 。 对 帮助 、 设 置 以 及 添加 新 项 等 平 级 操 
作 ， 则 应 该 使 用 其 他 过 渡 。 

记 住 ,切换 效果 是 应 用 到 链接 上 而 不 是 页 面 上 的 。 这 意味 着 如 果 有 多 个 链接 指向 一 


个 页 面 的 话 ， 转 到 这 个 页 面 时 可 以 有 不 同 的 过 渡 效 果 。 在 Web 应 用 中 ， 这 种 情况 应 
该 尽量 保持 过 渡 效 果 的 一 致 性 。 








2.4.7 反 转 过 渡 效 果 
可 以 在 链接 上 指定 data-direction-"reverse" 来 强制 使 用 反 转 过 渡 效 果 (后 
行为 )， 这 时 jQuery Mobile 将 自动 反 转 指定 的 过 渡 效 果 。 


2.5 ”对 话 框 


对 话 框 是 在 Web 应 用 中 显示 页 面 的 另 一 种 方式 ， 它 并 不 是 新 东西 ， 只 是 使 用 了 不 同 
语义 的 页 面 。 


对 话 框 页 面 用 于 显示 模 态 消息 、 列 表 ， 或 与 原 页 面 没 有 层级 关系 的 信息 。 
对 话 框 页 面 与 普通 页 面 的 最 大 区 别 如 下 ( 见 图 2-14)。 


。 如 果 指 定 了 data-add-back-btn， 则 在 左上 角 后 退 操作 按钮 的 位 置 将 显示 关闭 
操作 按钮 ( 带 有 一 个 又 )。 

。 显示 的 内 容 带 有 边 距 ， 不 是 全 屏 页 面 ， 而 是 在 原 页 面 上 弹出 的 窗口 。 

。 不 会 在 访问 历史 中 留 下 记录 。( 如 图 2-15 所 示 ， 在 对 话 框 中 打开 新 页 面 时 ， 新 页 
面 会 像 对 话 框 不 存在 一 样 打开 。 外 部 页 面 的 行为 也 是 这 样 。) 


E: 
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This is the main content of the dialog 
page 
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& 2-14: 同一 个 页 面 正 常 打开 和 以 对 话 方式 打开 的 效果 
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图 2-15: 对 话 框 页 面 不 会 增加 访问 历史 记录 


要 打开 对 话 杠 页 面 ， 只 需 在 链接 的 a 标签 上 加 上 data-rel-"dialog" 属性 。 这 个 
rel 定义 了 当前 页 面 与 所 链接 的 页 面 之 间 的 关系 (这儿 是 对 话 关系 )。 例 如 : 








«1-- 这 个 链接 指向 一 个 外 部 页 面 ， 将 显示 为 对 话 框 --> 
«a href-"./confirmation.html" data-rel="dialog"> 删除 此 项 </a> 





为 了 避免 引起 用 户 迷 惑 ， 最 好 将 对 话 框 的 默认 过 渡 动 画 改 为 slide 之 外 的 效果 ， 以 
便 与 层级 页 面 之 间 的 标准 动画 区 别 开 来 。 因 此 ， 一 个 典型 的 打开 对 话 框 的 链接 看 起 
来 会 像 这 样 : 
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<!-- 这 个 链接 指向 一 个 外 部 页 面 ， 将 显示 为 对 话 框 --> 
«a href="./confirmation.html" data-rel-"dialog" data-transition="pop"> 


删除 此 项 </a> 

















页 面 被 用 作对 话 框 时 ， 可 以 通过 data-overlay-theme 指定 覆盖 层 的 色 卡 。 








除了 在 链接 上 使 用 aata-rel="dialog" 属性 之 外 ， 还 可 以 使 用 data- 
心 role="dialog" 而 不 是 data-role-"page" 来 生成 对 话 框 。 
SN 


2.5.1 关闭 ， 还 是 后 退 

如 图 2-14 所 示 ， 以 对 话 框 方式 打开 的 页 面 不 能 后 退 ， 只 能 关闭 。 这 意味 着 使 用 对 话 
框 时 jQuery Mobile 内 部 的 导航 处 理 有 一 些 改变 。 

第 一 个 改变 是 对 话 框 “属于 ”打开 它 的 页 面 ， 不 会 在 访问 历史 中 增加 新 的 记录 。 

对 话 框 页 面 和 典型 的 桌面 应 用 中 的 弹出 框 或 模 态 内 容 的 行为 很 类 似 。 使 用 链接 、 按 


钮 或 其 他 UI 控件 关闭 对 话 时 ， 只 应 该 链接 回 原来 的 页 面 。jQuery Mobile 会 将 指向 
原 页 面 的 链接 当 作 关 闭 操作 处 理 。 








后 几 章 将 分 析 如 何 使 用 主题 及 CSS 自 定义 页 面 、 对 话 框 以 及 组 件 的 视觉 
Wa. 设计 。 
ac 
假设 在 delete.html 上 有 一 个 删除 操作 ， 这 个 链接 会 打开 一 个 对 话 框 (confirm.html) 
以 便 让 用 户 确 认 删 除 。 在 确认 对 话 框 上 ， 应 该 有 两 个 操作 : 删除 和 取消 。 


对 话 框 页 面 不 会 在 导航 历史 中 添加 记录 。 因 此 ， 如 果 用 户 在 对 话 框 开 着 时 刷新 页 面 ， 
他 将 看 到 对 话 处 于 关闭 状态 的 原始 页 面 。 

取消 链接 应 该 关闭 对 话 ， 和 左上 角 的 又 形 按 钮 一 样 。 这 时 ， 取 消 链接 应 该 只 是 一 个 
普通 的 指向 delete.html 的 a 标签 。 

















为 了 让 这 个 例子 更 完善 一 些 ， 这 儿 引 入 一 点 下 一 章 的 内 容 。 在 链接 上 使 用 aata- 
role="button"， 这 些 下 划 线 链接 将 被 转 成 全 屏 宽度 、 适 合 手指 操作 高 度 的 按钮 。 
后 儿童 将 讨论 更 多 关于 按钮 以 及 如 何 定制 它们 的 内 容 。 

wt 下 一 章 我 们 将 看 到 一 种 使 用 JavaScript 来 关闭 对 话 的 方法 。 不 过 ， 如 果 我 
Wa. 们 的 Web 应 用 的 目标 包括 不 兼容 jQuery Mobile 的 设备 的 话 ， 推 荐 使 用 标 
佳 的 链接 来 返回 打开 它 的 页 面 。 记 住 jQuery Mobile 使 用 渐进 增强 ， 即 使 
浏览 器 不 支持 JavaScript，Web 应 用 仍 能 工作 。 








A 























图 2-16 展示 了 对 话 框 的 实际 效果 。 
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2-16; 在 iPhone 上 的 对 话 示例 
下 面 是 delete.html 的 代码 : 


<!DOCTYPE html» 
<html> 


<head> 

<meta charset="utf-8" /> 

<title>Up and Running with jQuery Mobile</title> 

«link rel="stylesheet" href-"jquery.mobile-1.0.min.css" /> 

«script src-"jquery-1.6.4.min.js"»«/script» 

«script type-"text/javascript" src-z"jquery.mobile-1.0.min.js"- 
«/script» 

«meta name-"viewport" content-"width-device-width, initial-scale-1"- 
«/head» 


«body» 
«div data-role-"page" id-"main"» 
«div data-role-"header"» 
«hl»2Book Properties«/h1» 


</div> 


<div data-role="content"> 





«h2»Up and Running with jQuery Mobile-/h2» 
«p»Author: «b»Maximiliano Firtman«/b»«/p» 
<p>This book has no reviews yet on our database.«/p» 


«p» 

«a href-"./confirmation.html" data-rel-"dialog" data-transition- 
"pop" data-roles"button"s 

Delete this book 


</a> 
<a href="" data-role="button"> 
Modify this book 
</a> 
</p> 
</div> 


<div data-role="footer"> 
«h4»O'Reilly Store</h4> 
</div> 


</div> 


</body> 
</html> 


下 面 是 confirmation.html 的 代码 ; 


<!DOCTYPE html» 
<html> 


<head> 

<meta charset="utf-8" /> 

<title>Delete Confirmation</title> 

<link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> 

<script src-"jquery-1.6.4.min.js"»«/script» 

<script type="text/javascript" src="jquery.mobile-1.0.min.js"></script> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 


<body> 


<div data-role="page" id="alert"> 
<div data-role="header"> 
<hl>Confirmation</h1> 
</div> 
<div data-role="content"> 
<h2>Are you sure you want to delete this book?</h2> 





«1-- 这 将 是 一 个 正常 的 页 面 加 载 --> 
«a href-"delete-yes.html" data-role-"button"»Yes, delete</a> 











«1-- 这 只 是 一 个 关闭 链接 --> 








«a href-"delete.html" data-role-"button"»Cancel«c/a» 
</div> 


</div> 


</body> 
</html> 


a; 可 以 在 页 面 上 使 用 data-close_btn_text 属性 来 自 定义 关闭 按钮 的 文本 。 


ASN 
2.5.2 ”从 对 话 框 打开 页 面 
对 话 框 可 以 有 指向 其 他 页 面 的 普通 链接 (或 绝对 外 部 链接 ) 。 用 户 点 击 了 指向 非 原 页 


面 (如 上 一 节 所 述 ) 的 链接 时 ，jQuery Mobile 会 关闭 对 话 ， 回 到 原 页 面 ， 然 后 打开 
新 页 面 ， 就 像 这 个 链接 本 来 就 在 原 页 面 上 一 样 。 


在 我 们 的 例子 中 ， 如 果 点 击 了 “Yes, delete” 按 钮 ， 则 对 话 框 将 被 关闭 ， 接 着 是 一 
个 典型 的 过 渡 效 果 ， 然 后 到 达 delete-yes.html 页 面 。 


图 2-15 中 的 图 表 显 示 了 这 种 情况 下 导航 发 生 了 什么 。 


2.6 与 电话 整合 

来 ， 跟 我 重复 一 遍 :“ 我 们 正在 为 移动 设备 设计 页 面 ， 移 动 设备 ， 移 动 设 备 。” 这 意 
味 着 什么 ”意味 着 我 们 应 该 尽 可 能 地 与 电话 整合 。 

实现 这 一 点 的 一 个 方法 是 通过 URI 机 制 ，a 标签 链接 的 nref 属性 中 可 以 使 用 不 同 
的 协议 。 相 信 你 已 经 对 mailto: 协议 很 熟悉 了 ,但 在 移动 浏览 器 上 ， 还 有 很 多 协 
议 。 这 些 协 议 有 些 是 大 多 数 设 备 都 支持 的 ， 还 有 些 则 是 依赖 平台 的 (如 10S)。 依 赖 
平台 的 协议 在 创建 本 地 Web 应 用 并 知道 它 会 在 什么 平台 上 运行 时 很 有 用 。 


2.6.1 拨打 电话 

WE: 大 多 数 移动 设备 同时 也 是 电话 ! 所 以 ， 为 什么 不 能 创建 拨打 电话 的 链接 呢 ? 
如 果 你 正在 创建 业务 指南 ， 即 使 用 的 是 自己 熟悉 的 手机 ， 大 多 数 人 都 宁可 打 电 话 而 
不 是 在 设备 上 填写 表单 。 图 2-17 显示 了 在 不 同 的 设备 上 拨打 电话 的 情况 。 


首选 的 方法 (日 本 i-Mode 标准 ) 是 使 用 tel :< 电话 号 码 > 方案 : 
























































«a href-"tel:«1800229933". 免费 呼叫 我 们 ! </a> 
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& 2-17: 点 击 电话 链接 时 ，Palm 的 webOS 及 Android 会 显示 呼叫 窗口 


这 个 URI 方 案 在 RFC5341 (http://tools.ietf.org/html/rfc5341) 中 被 提议 为 标准 ， 不 
过 请 仔细 阅读 这 份 标准 ， 因 为 该 提议 的 大 部 分 参数 现在 还 没有 设备 支持 。 








建议 插入 的 电话 号 码 使 用 国际 格式 ， 加 号 (+)， 国 家 代码 ， 区 号 ， 最 后 是 
N a. 本 地 号 码 。 我 们 无 法 预料 访客 来 自 何 处 ， 即 使 他 们 来 自 本 国 ， 甚 至 来 自 本 
U^ 区 ， 国 际 格式 的 电话 号 码 也 没有 问题 。 


























用 户 激活 电话 链接 时 将 看 到 一 个 确认 和 警告， 询问 他 是 否 要 拨打 这 个 电话 ， 警 告 上 会 
显示 完整 的 电话 号 码 以 便 用 户 做 出 决定 。 这 是 为 了 避免 苏 纹 用 户 拨打 国际 电话 或 收 
费 电话 。 


一 些 非 电话 移动 设备 (如 iPod Touch 或 iPad) 不 允许 语音 呼叫 ， 但 它们 会 提示 是 否 
将 该 电话 号 码 添 加 到 电话 秒 中 ( 见 图 2-18). 











Call Test 


« » Q AMA 4 | mobilexweb.com/tests/ch6/7-call/ 


Call Test 
* Callusng wal Add to Existing Contact 



















图 2-18: 一 些 设备 (如 苹果 的 iPad) 不 能 打 电 话 ， 不 过 它们 为 电话 链接 提供 了 别 的 选项 
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2.6.2 ”视频 及 VolP 呼 叫 

基于 10S 的 带 摄 像 头 的 设备 ， 如 iPhone 4 及 iPod Touch 4G， 包 含 一 个 名 为 FaceTime 
的 视频 聊天 应 用 。 为 此 类 设备 创建 的 应 用 可 以 使 用 facetime://< 用 户 名 或 号 码 > 
来 创建 视频 呼叫 。 在 别 的 设备 上 点 击 这 种 链接 会 出 错 : 





«a href-"facetime:101010"» 用 Facetime 呼叫 我 </a> 


Skype 也 有 它 专 用 的 链接 URI 机 制 。 要 创建 这 种 链接 需要 Skype 用 户 名 。 还 可 以 添 
加 一 个 可 选 的 ?call 参数 来 立即 初始 化 一 个 呼叫 ， 如 果 不 加 这 个 参数 ， 我 们 会 看 到 
用 户 的 个 人 信息 : 


«a href="skype:skype user?call"> Ħ Skype 呼叫 我 们 </a> 





如 果 设 备 上 没有 安装 链接 中 指定 的 本 地 应 用 ， 比 如 FaceTime 或 Skype, 
EMO 则 用 户 将 收 到 一 个 错误 。 在 不 支持 的 设备 上 ， 最 好 不 要 显示 这 些 链接 。 
关于 特定 设备 及 内 容 自 适应 相关 的 主题 ， 可 参见 《移动 网 络 程序 设计 》 
(O'Reilly) 一 书 。 











关于 移动 浏览 器 的 URI 方案 的 更 新 信息 ， 可 访问 http://www.mobilexweb.com/go/uri。 


2.6.3 发 送 电子 邮件 

一 些 带 有 训 览 器 的 现代 设备 也 有 能 响应 传统 互联 网 的 mailto: 协议 的 邮件 应 用 。 语 法 
是 ?parameters。 不 同 设备 的 参数 可 能 不 同 ， 但 基本 上 包括 cc. bec. subject 以 及 
body» ZUA URL 格式 (key-value&key-value) 定义 ， 值 必须 已 经 过 URI 编码 。 


下 面 是 一 些 例子 








«a href-"mailto:infoGmobilexweb.com"» 给 我 们 发 邮件 </a> 

«a href-"mailto:infoGmobilexweb.com?subject-Contact$20from$20mobile"- 

给 我 们 发 邮件 </a> 

«a href-"mailto:infoG?mobilexweb.com?subject-Contact&body-This$20is$20 

the$20body"» 给 我 们 发 邮件 </a> 
记 住 mailto: 机 制 并 不 能 保证 消息 被 发 出 。 它 一 般 只 是 打开 邮件 应 用 ， 在 做 了 可 能 
的 修改 之 后 用 户 必 须 自己 确认 邮件 是 否 已 被 发 送 。 如 果 需 要 确保 邮件 被 发 送 ， 可 以 
使 用 服务 器 端 机 制 。 


一 般 来 说 ， 如 果 想 在 邮件 的 正文 中 插入 新 行 ， 可 以 使 用 回 车 加 换行 符 (%0D%0A)。 
f£ iOS 的 邮件 应 用 中 这 个 方法 不 管用 ， 不 过 可 以 在 body 中 插入 HTML 标签 ， 因 
此 ， 可 以 在 移动 版 Safari 浏览 器 中 使 用 <br/>: 
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«a href-"mailto:infoGmobilexweb.com?subject-Contact&body-This$20is$20the£$20 
body$0D£0AThis£20is$20a220new£201ine"» 给 我 们 发 邮件 </a> 


«a href-"mailto:infoemobilexweb.com?subject-Contact&body-This$20is$20the$ 
20body«br/» 
This£20is£20a£20new£201ine"» 从 iPhone 上 给 我 们 发 邮件 </a> 


2.6.4 发 短 消息 

我 们 都 喜欢 短 消息 服务 ， 因 此 移动 浏览 器 一 般 都 提供 了 通过 链接 打开 新 短 消 息 窗口 
的 功能 。 要 实现 这 一 点 ， 有 两 种 可 能 的 URI 方案 ,分别 为 sms:// fll smsto://. 
不 幸 的 是 ， 没 有 标准 的 检查 用 户 麟 览 器 支持 哪 种 方案 的 方法 。 不 过 ， 对 只 使 用 
jQuery Mobile 的 智能 手机 ， 可 以 安全 地 使 用 sms://。 





发 送 短 消息 的 语法 是 sms [to] :// [< 目标 号 码 >] [? 参数 ] 。 如 你 所 见 ， 目 标号 码 
是 可 选 的 ， 也 就 是 说 不 带 任何 参数 即 可 打开 设备 的 短 消 息 编 辑 窗口 。 出 于 安全 原因 
(避免 收费 短 消 息 内 容 )， 不 是 所 有 电话 都 支持 定义 消息 内 容 参 数 。 和 发 电子 邮件 一 
样 ， 用 户 点 击 链接 时 ， 不 会 自动 发 送 短 消息 ， 只 是 打开 编辑 短 消息 的 窗口 ， 用 户 必 
须 手 动 完 成 整个 过 程 。 目 标号 码 应 该 要 么 是 个 国际 号 码 ， 要 么 是 个 短 号 码 ， 在 后 一 
种 情况 下 ， 我 们 必须 确保 用 户 在 既定 的 国家 ， 并 且 已 连接 到 一 个 支持 那个 短 号 码 的 














这 儿 是 一 些 例子 : 
«a href-"sms://"» 发送 短 消息 </a> 


«a href="sms://?body=Visit%20the%20best%20site%20at%20http://mobilexweb. 
com"» 通过 短 消 息 邀 请 朋友 <a> 


«a href="sms://+3490322111"> 通过 短 消 息 联系 我 们 </a> 





«a href="sms://+3490322111?body=Interested%20in%20Product%20AA2"> 关于 产品 
AA2 的 更 多 信息 </a> 


2.6.5 ”其 他 URI 方 案 


如 果 想 深 入 了 解 HTML 与 电话 的 整合 ， 包 括 彩 信 、iDEN 网 络 直接 呼叫 (iDEN- 
networks Direct Call) 、 视 频 通 话 、 墨 莓 PIN 消息 、Facebook、Twitter 以 及 其 他 原生 
应 用 的 整合 ， 可 以 阅读 《移动 网 络 程序 设计 》 一 书 。 














Ha 





EA URI 方案 不 是 jQuery Mobile 的 功能 。jQuery Mobile 只 是 将 URI 保持 
Wa. 原样 ， 移 动 浏 览 器 会 响应 它们 。 
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2.6.6 iiu 合 起 来 
让 我 们 创建 一 个 简单 的 使 用 不 同 URI 方 案 的 jQuery Mobile Web J Hl: 


<!DOCTYPE html» 
«html» 


«head» 

«meta charset-"utf-8" /> 

«title»jQuery Mobile 深入 浅 出 </title> 

«link rel-"stylesheet" href-"jquery.mobile-1.0.min.css" /> 

«script src-z"jquery-1.6.4.min.js"»«/script» 

«script type-"text/javascript" src-"jquery.mobile-1.0.min.js"»«/script» 
«meta name-"viewport" content-"width-device-width, initial-scale-1"- 
«/head» 





«body» 


«div data-role-"page" id-"main"- 
«div data-role-"header"- 
«hi» 专 有 链接 </h1> 
«/div» 
«div data-role-"content"- 


«p» 点 击 下 面 的 按钮 测试 移动 设备 专 有 链接 的 行为 。</p> 


«p» 
«a hrefz"tel:4«1800229933" data-role-"button"- 
呼叫 白宫 


</a> 


<a href="sms:+1800229933" data-role="button"> 
给 白宫 发 短 消息 


</a> 








:+1800229933?body=Hello!" data-role="button"> 


«a href-"sms 
E 


带 正文 的 短 六 


</a> 





F 











下 三 











«a href-"mailto:infoGmobilexweb.com?subject-Sent£20from$20the£$20web" 
data-role-"button"- 
给 我 发 邮件 


</a> 





«a href="skype:maximiliano.firtman?call" data-role-"button"- 
用 Skype 联系 我 


</a> 


<a href="facetime:+1800229933" data-role-"button"- 
用 Facetime 呼叫 我 


</a> 


仅 限 带 摄像 头 的 ios 设备 ) 








«/p» 
</div> 
<div data-role="footer"> 
<h4>www.mobilexweb.com</h4> 
</div> 
</div> 


</body> 
</html> 
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山 组 件 





jQuery Mobile 为 Web 应 用 准备 了 相当 多 的 UI 组 件 。 记 住 ， 我 们 总 是 可 以 使 用 普通 
的 HTML 和 CSS 来 添加 内 容 及 实现 各 种 创意 。 不 过 ， 为 了 兼容 各 个 平台 ， 我 们 将 
优先 使 用 框架 提供 的 各 种 组 件 。 


jQuery Mobile 组 件 可 以 分 成 以 下 几 类 : 


。 工具 栏 组 件 ， 
。 格式 化 组 件 ，; 
。 按钮 组 件 ，; 
。 列表 组 件 ， 
。 表单 组 件 。 


本 章 将 讲解 前 三 类 组 件 ， 列 表 及 表单 组 件 将 放 到 后 面 的 章节 讲解 。 


3.1 工具 栏 


工具 栏 在 Web 应 用 中 是 可 选 的 ， 用 于 定义 页 头 以 及 /或 者 页 脚 的 区 域 。 页 头 及 页 脚 
都 是 可 选 的 ， 不 过 基本 上 每 个 移动 Web 应 用 都 有 页 头 。 


之 前 的 章节 中 我 们 已 经 讨论 过 页 头 ， 它 是 页 面 顶部 用 于 放置 标题 以 及 /或 者 后 退 / 
关闭 按钮 的 条 形 区 域 。 页 头 通 常 由 一 个 role 为 header 的 div 定 义 ， 其 中 包含 一 
个 n1 标题 。 
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«div data-role-"header"- 
«his 页 面 标题 </h1> 
</div> 
页 脚 与 页 头 类 似 ， 位 于 Web 应 用 的 底部 ， 用 途 更 为 广泛 。 它 可 以 包含 版 权 信 息 、 呼 
叫 (call action) 链接 ， 或 者 工具 栏 或 标签 导航 在 内 的 一 系列 按钮 。 页 脚 通常 是 一 个 
role 为 footer 的 div: 


«div data-role="footer"> 


</div> 


3.1.1 定位 
定位 工具 栏 看 起 来 很 容易 : 页 头 在 顶部 ， 页 脚 在 底部 。 不 过 ，jQuery Mobile 的 定位 
系统 让 我 们 可 以 为 这 两 个 工具 栏 定 义 不 同 的 行为 。 


每 个 工具 栏 (页 头 或 页 脚 ) 都 可 以 用 四 种 方法 定位 : 


。 内 联 模式 ， 

。 标准 固定 模式 ， 
。 全 屏 固定 模式 ， 
。 真实 固定 模式 。 


内 联 模式 是 各 个 工具 栏 的 默认 模式 。 这 意味 着 页 头 和 页 脚 会 在 页 面 上 以 内 联 流 的 方 
式 呈 现 ， 也 就 是 说 如 果 页 面 的 内 容 长 度 超出 可 见 高 度 时 页 脚 将 被 隐藏 ， 直 到 向 下 拖 
动 滚动 条 ， 同 时 页 头 只 在 滨 动 条 在 顶部 时 才 可 见 。 

有 时 需要 让 两 个 工具 栏 总 是 可 见 ， 因 此 jQuery Mobile 提供 了 固定 以 及 全 屏 模式 。 
可 以 使 用 aata-position 属性 来 定义 工具 栏 的 定位 模式 。 

jQuery Mobile 中 的 国定 工具 栏 会 位 于 页 面 顶部 〈 页 头 ) 或 底部 〈 页 脚 )。 用 户 滚动 
页 面 内 容 时 ， 工 具 栏 会 自动 淡出 隐藏 ， 深 动 完成 时 ， 固 定 工具 栏 会 再 次 在 顶部 或 底 
部 对 应 的 位 置 出 现 。 

用 户 点 击 页 面 上 某 个 非 交 互 的 内 容 区 域 时 ， 固 定 模 式 的 工具 栏 会 转换 为 内 联 模 式 ， 
反之 亦 然 。 这 个 机 制 允 许 用 户 通过 触摸 屏幕 在 内 联 / 固定 模式 之 间 方 便 地 切换 ， 以 
便 在 需要 时 有 更 多 的 空间 来 显示 内 容 。 


如 图 3-1 所 示 ， 要 定义 一 个 固定 工具 栏 ， 只 需 使 用 qata-position="fixed"。 
































risus non leo veionais s viverra ut vel 
orci. Sed consequat turpis fermentum 
justo commodo ac sollicitudin risus 
bibendum. Aliquam pretium, diam a 
tincidunt vehicula, est lectus ultricies 
enim, ut aliquet felis felis ac urna. Nam 
non erat id mi venenatis interdum. 
Aenean eu mauris ipsum. Nulla eget 
velit ut risus porta fringilla vel sit amet 
metus. Quisque scelerisque ultricies 
convallis. Sed ornare nunc ut sem 
gravida sed mollis mauris convallis. 
Donec orci elit, blandit sed gravida nec, 
iaculis eget quam. Nulla tortor velit, 
interdum id sodales vitae, aliquet vel 





tellus. Pellentesque est metus, 
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lacinia at, ornare eget nunc. Quisque ut 
risus non leo venenatis viverra ut vel 
orci. Sed consequat turpis fermentum 
justo commodo ac sollicitudin risus 
bibendum. Aliquam pretium, diam a 
tincidunt vehicula, est lectus ultricies 
enim, ut aliquet felis felis ac urna. Nam 
non erat id mi venenatis interdum. 
Aenean eu mauris ipsum. Nulla eget 
velit ut risus porta fringilla vel sit amet 
metus. Quisque scelerisque ultricies 
convallis. Sed ornare nunc ut sem 
gravida sed mollis mauris convallis. 
Donec orci elit, blandit sed gravida nec, 
iaculis eget quam. Nulla tortor velit, 
interdum id sodales vitae, aliquet vel 
tellus. Pellentesque est metus, 
pellentesque sed volutpat non, 
consequat non massa. Duis varius urna 
eu non a voupat | in "a urna porn 








图 3-1: 无 论 页 面 内 容 有 多 长 以 及 初始 状态 大 态 
面 顶 部 (AFAA) 或 底部 (用 于 页 脚 )， 


全 屏 工具 栏 其 实 是 一 个 只 在 用 





只 需 在 内 容 上 点 击 一 下 。 


» a 








` 





滚动 条 的 位 置 在 哪儿 ， 固 定 工具 栏 都 将 位 于 
不 过 页 面 滚动 时 ， 工 具 栏 将 被 隐藏 


户 点 击 屏幕 时 才 出 现 的 隐藏 的 固定 工具 栏 ， 用 户 再 次 
点 击 屏幕 时 ， 它 又 会 消失 。 使 用 这 种 工具 栏 时 内 容 将 全 屏 显 





um 对 国定 及 全 屏 工具 栏 来 说 ， 用 户 都 可 以 通过 点 击 内 容 区 域 来 显示 或 隐藏 国 
Q4. 定 工具 栏 ， 差 别 在 于 对 全 屏 模式 来 说 ， 


工具 栏 会 真正 被 隐藏 起 来 ， 而 对 固 





示 ， 用 户 需 要 工具 栏 时 ， 


4 定 模式 来 说 ,工具 栏 会 转 为 内 联 定位 。 
在 显示 照片 、 长 文本 或 大 表单 时 这 个 特性 特别 有 用 ， 因 为 可 以 获得 全 屏 浏 览 的 好 处 。 


工具 栏 可 见 时 ， 内 容 会 被 迹 住 。 在 大 多 数 浏览 器 中 页 头 会 使 用 半 透 明 ， 可 以 透 过 页 
头 看 到 后 面 的 内 容 。 


要 使 用 这 种 模式 ， 只 需 在 工具 栏 上 定义 data-position-"fixed" 并 在 当前 页 面 
(data-role 属性 值 为 page 的 元 素 ) 上 定义 data-fullscreen-"true", 


下 面 的 例子 定义 了 一 个 全 屏 工具 栏 : 
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«div data-role-"page" data-fullscreen-"true"- 
«div data-role-"header" data-position-"fixed"- 
«his 页 面 标题 </h1> 
</div> 
«div data-role="content"> 
</div> 
«div data-role-"footer" data-position="fixed"> 


«/div» 


</div> 


3.1.2 ”真实 固定 工具 栏 

写作 本 书 的 时 候 ， 只 有 一 部 分 移动 浏览 器 支持 CSS 特性 position:fixed 以 及 
overflow:auto。 固 定 定位 和 滚动 区 域 允 许 我 们 定义 屏幕 上 的 固定 区 域 ， 即 使 用 户 
深 动 文档 ， 这 些 区 域 的 位 置 仍然 可 以 保持 不 变 。 视 口 以 及 缩放 通常 会 让 固定 定位 的 


设计 变 得 复杂 。 























一 些 移动 浏览 器 的 最 新 版 本 ， 包 括 iOS 上 的 Safari, Android, BlackBerry 以 及 诺 基 
亚 的 浏览 器 , 都 支持 position:fixed 以 及 /或 者 使 用 overflow:auto 来 在 一 个 区 
块 中 滚动 的 功能 。 


想 提 供 真 实 固定 工具 栏 体验 ， 可 以 开启 jQuery Mobile 中 的 触摸 溢出 (overflow) 功 
能 。 使 用 CSS 的 overflow:auto, 框架 将 创建 一 个 较 小 的 滚动 区 域 来 禁 代 全 屏 ,， 这 
样 工 具 栏 就 可 以 总 是 位 于 一 个 位 置 。 在 jQuery Mobile 1.0 版 中 ， 这 个 功能 默认 被 关 
闭 了 ， 可 以 使 用 JavaScript 开启 它 。 开 启 这 个 特性 后 ， 不 支持 它 的 浏览 器 会 降级 为 
标准 固定 工具 栏 。jQuery Mobile 将 来 的 版 本 会 废弃 这 个 属性 ， 并 在 支持 的 设备 上 上 默 
认 使 用 真实 固定 工具 栏 。 














本 书后 面 的 章节 会 介绍 JavaScript API， 现 在 只 需要 知道 ， 开 启 真实 固定 工具 栏 的 代 
码 是 : 





$.mobile.touchOverflowEnabled = true; 


3.1.3. 在 页 头 中 添加 内 容 
标准 的 jQuery Mobile 页 头 包 含 一 个 标题 、 一 个 hbX 子 元 素 ， 以 及 可 选 的 一 两 个 位 于 
页 头 右 侧 以 及 /或 者 左 侧 的 按钮 。 也 可 以 按 需要 定制 页 头 的 外 观 及 内 容 。 





1. 添加 按钮 

触摸 设备 的 移动 可 用 性 设计 通常 (但 并 不 总 是 ) 在 右 侧 使 用 肯定 动作 ， 在 左 侧 使 用 
否定 动作 。 肯 定 动作 的 例子 有 : 完成 、 保 存 、 是 、 好 以 及 发 送 。 否 定 动作 则 有 : 取 
消 、 返 回 、 不 、 退 出 以 及 注销 。 





第 2 章 我 们 讲 到 不 需要 自己 提供 后 退 操作 ，jQuery Mobile 会 自动 处 理 浏览 
ED 加 的 后 退 按钮 ， 也 可 以 在 页 面 上 使 用 data-add-back-btn-"true" 来 在 
标题 左 侧 添加 一 个 按钮 ， 如 果 使 用 了 这 个 选项 ， 则 不 应 该 再 在 左 侧 添加 其 
他 按钮 。 














页 头 的 按钮 只 是 一 个 超 链 接 ， 使 用 的 是 位 于 页 头 中 的 a 元 素 。 如 果 只 提供 了 一 个 a 
元 素 ， 则 它 将 位 于 标题 的 左 侧 。 如 果 添 加 了 两 个 按钮 ， 则 第 一 个 将 位 于 标题 左 侧 ， 
第 二 个 则 将 位 于 标题 右 侧 。 





oa 


d 如 果 想 强制 指定 按钮 的 位 置 ， 可 以 使 用 CSS X: class-"ui-btn-right" 
Aa 
t | 

' 





uad. E class-"ui-btn-left", 
«d. 





下 面 的 页 头 将 只 有 一 个 按钮 ， 如 图 3-2 所 示 : 


«div data-role-"header"- 
«a href-"logout"»Log out«/a» 
«hl1»Titlec/h1» 

</div> 





Log out Title 


图 3-2: 页 头 可 以 在 标题 的 左 侧 或 右 侧 包含 按钮 
下 面 的 页 头 将 显示 两 个 按钮 ， 右 边 那 个 带 有 图 标 : 














BS 


«div data-role-"header"» 

«a href-"logout"»Log out«/a» 

«hi»Titlec/h1» 

«a href-'"settings" data-icon-"gear'"»Settings«/a» 
«/div» 


上 例 结 果 见 图 3-3， 从 中 可 以 看 到 ， 可 以 使 用 data-icon 属性 将 任意 标准 jQuery 
Mobile 图 标 应 用 到 工具 栏 图 标 上 ， 其 中 daata-icon 可 用 的 值 上 一 章 中 已 经 提 到 ， 
本 章 3.4 节 会 再 次 涉及 。 
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Log out Title 党 Settings 








图 3-3: 为 了 提高 可 读 性 ， 工 具 栏 的 按钮 中 经 常 使 用 图 标 


默认 情况 下 ， 工 具 栏 上 的 每 个 按钮 都 将 继承 工具 栏 的 主题 (如 果 没 有 定义 ， 则 继承 
页 面 主题 ) 。 如 果 想 让 一 个 按钮 与 众 不 同 ， 可 以 使 用 data-theme 来 改变 它 的 色 样 
(参见 图 3-4) 。 








X Cancel New record V Save 











图 3-4: 可 以 使 用 主题 色 样 改变 按钮 的 外 观 
例如 : 


«div data-role-"header"- 

«a href-"cancel" data-icon-"delete"»Cancel«c/a» 

«hl»New record«/h1» 

«a href-"save" data-icon-"check" data-theme-"b"sSavec/a» 
«/div» 

















ua. 3R EfEJH aata-rel-"back", iXffÉ jQuery Mobile 就 能 正确 地 处 理 返 回 动 


*] 如 果 想 在 自 定义 页 头 上 提供 一 个 指向 上 一 页 的 按钮 ， 一 定 要 在 对 应 的 a 元 
Aa 

t 

t 画 以 及 浏览 历史 。 








2. 添加 logo 

使 用 图 片 或 logo 来 替代 文本 是 很 常见 的 需求 。 讲 解 图 片 在 移动 互联 网 应 用 中 的 用 法 
超出 了 本 书 的 范围 ， 不 过 如 果 想 在 页 头 中 显示 一 个 图 片 以 及 标准 的 左右 按钮 的 话 ， 
最 好 的 方式 是 在 对 应 的 hi 中 使 用 img 标签 : 




















«div data-role-"header"- 

«a href-"cancel" data-icon-"delete"sCancel«/a» 

«hl»«img src-"images/logo.png"»«/hl» 

«a href="save" data-icon-"check" data-theme-"b"sSave-/a» 
«/div» 


页 头 会 自动 适应 图 片 的 高 度 ， 如 图 3-5 所 示 。 记 得 图 片 要 与 当前 色 样 的 背景 色 匹 配 。 
出 于 兼容 性 考虑 ， 不 要 使 用 高 度 超过 125 px 的 图 片 。 
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3-5: 在 页 面 标题 中 使 用 图 片 与 使 用 img 元 素 一 样 简单 





记 住 使 用 jQuery Mobile 的 目标 是 同时 适用 不 同 的 屏幕 尺寸 和 分 辨 率 ， 因 此 
c 为 了 包含 图 片 ， 需 要 一 些 特 性 检测 算法 以 便 为 每 个 设备 都 提供 最 好 的 体验 。 




















3. 自 定义 页 头 
如 果 不 想 要 典型 的 jQuery Mobile 页 头 泻 染 效果 ， 可 以 禁用 自动 页 头 行为 《如 对 hx 
及 a 的 处 理 )， 方 法 为 将 页 头 的 内 容 放 到 一 个 块 容器 〈 通 党 为 一 个 aiv 元 素 ) 中 。 


^o 





























自 定义 页 头 可 用 来 添加 表单 元 素 ， 如 用 于 过 滤 或 菜单 访问 的 下 拉 列 表 或 复 
Wa. 选 框 。 这 些 控件 会 在 第 5 章 讨论 。 
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看 一 个 例子 (OLEI 3-6) : 























«div data-role="header"> 
<div> 
«h1»A custom titlec/h1» 
«a href="#">A non-button link</a> 
«/div» 
</div> 


自 定 义 页 头 需要 自己 编写 HTML K CSS 代码 处 理 。 页 头 的 高 度 会 自动 适应 自 定 义 
的 内 容 。 

















3-6: 通过 自 定义 页 头 ， 可 以 取消 页 头 中 hX 及 a 元 素 的 自动 行为 


3.1.4 在 页 脚 中 添加 内 容 

页 脚 远 比 页 头 灵活 。 和 页 头 一 样 ， 每 个 a 元 素 都 会 被 浑 染 为 按钮 ， 尽 管 页 脚 中 没有 
左 、 右 按钮 位 。 每 个 按钮 都 以 内 联 方式 添加 ， 一 个 接着 一 个 。 就 像 在 按钮 栏 中 一 样 ， 
我 们 可 以 添加 任意 数量 的 按钮 。 
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默认 情况 下 ，jQuery Mobile 不 会 在 按钮 与 页 脚 边框 之 间 添 加 内 边 距 。 为 了 让 视觉 外 
观 更 好 一 些 ， 应 该 在 页 脚 上 添加 一 个 ui-bar 类 。 








看 一 个 例子 (参见 图 3-7) : 





«div data-role-"footer" class="ui-bar"> 

«a href="refresh">Refresh</a> 

«a href-"filter"»Filter«c/a» 

«a href-"search"»Search«/a» 

«a href-"add" data-theme-"b"sNew Item</a> 
«/div» 





X Cancel New record V Save 


This is the main content of the page. 


Refresh Filter Search New Item 











图 3-7: 与 页 头 相 比 ， 页 脚 在 按钮 的 数量 及 排列 上 更 为 灵活 


a 





接 下 来 会 讲 到 按钮 组 ， 它 允许 将 一 系列 按钮 当 作 一 个 大 的 组 合 元 素 处 理 。 
a4. 这 种 元 素 也 可 以 添加 到 页 脚 中 。 


. 
(USA 


页 脚 也 可 以 处 理 表单 元 素 以 及 导航 栏 ，3.1.5 而 将 涉及 这 些 内 容 。 


3.1.5 ”导航 栏 

导航 栏 (也 称 为 navbar) 是 由 一 组 链接 组 成 的 一 系列 互 斥 选项 ， 可 放置 在 工具 栏 上 ， 
通常 被 放 在 页 脚 。 导 航 栏 是 Web 应 用 的 主要 导航 方式 。 在 一 些 平台 上 ， 如 i105S 或 诺 
基 亚 ， 导 航 栏 也 被 称 为 标签 栏 。 














为 了 避免 UI 错误， 导航 栏 不 应 该 放置 动作 按钮 (如 保存 、 取 消 以 及 搜索 )， 
EAS 而 只 应 该 作为 Web 应 用 的 主导 航 结构 。 动 作 按钮 应 该 为 页 头 或 页 脚 上 的 普 
通 按钮 。 

















导航 栏 只 是 一 个 容器 ， 通 常 为 一 个 div 元素， 内 容 为 一 个 包含 各 个 导航 链接 的 无 序 
列表 。 容 器 的 role 需要 被 指定 为 navbar: 


«div data-role-"navbar"-» 
«ul» 
<li><a href-"link1"» 选项 1</a> 
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«ew. pemn, meos 
<li><a href-"linkn"» 选项 n</a> 
«/ul» 
</div> 


如 图 3-8 所 示 ， 导 航 按 钮 与 图 3-7 中 的 标准 按钮 的 外 观 不 同 。 按 钮 的 宽度 根据 以 下 





算法 计算 。 

。 导航 栏 上 只 有 1 个 按钮 : 10096; 

。 导航 栏 上 有 2 个 按钮 : 5096; 

。 导航 栏 上 有 3 个 、4 个 或 5 个 按钮 : 分 别 为 33%、25% X 2096; 

。 6 个 或 更 多 按钮 : 多 行 显示 ， 每 行 2 个， 每 个 50%， 如 图 3-9 所 示 。 











Records 


Search Filter Delete 


This is the main content of the page. 


Search Filter 








3-8: 在 页 头 及 页 脚 中 的 导航 栏 








New Search 


Filter Delete 


Update EET 








3-9. 如 果 按 钮 数 超过 5 个 ， 导 航 栏 排版 将 改 为 每 行 两 个 按钮 
































摸 区 域 的 最 小 推荐 宽度 。 








最 好 将 导航 栏 的 元 素 控制 在 6 个 以 下 ， 以 便 让 它们 全 部 显示 在 一 行 。 按 钮 
心 。 数 限制 为 5 的 原因 是 在 大 多 数 智能 手机 上 ， 屏 幕 的 五 分 之 一 宽度 是 适合 触 





1. 使 用 图 标 

使 用 标准 的 jQuery Mobile 图 标 机 制 ， 可 以 为 每 个 导航 元 素 添 加 图 标 。 要 实现 这 一 
点 ， 可 以 使 用 aata-icon 属性 以 及 标准 的 图 标 名 ,或 者 也 可 以 使 用 自己 的 图 标 来 自 
定义 。 

默认 情况 下 ， 图 标 位 于 文本 的 顶部 ， 如 图 3-10 所 示 。 如 果 至 少 有 一 个 导航 元 素 使 用 
了 图 标 ， 则 整个 导航 栏 的 高 度 都 会 更 新 以 便 适应 那个 带 图 标的 元 素 : 























«div data-role-"header" data-position="fixed"> 
<hl>Home</h1> 
<div data-role="navbar"> 
«ul» 
<li><a href="#index" data-icon-"home"-sHomec/a» 
<li><a href="#contacts" data-icon="search">Contacts</a> 
<li><a href="#events" data-icon="info">Events</a> 
<li><a href="#news" data-icon="grid">News</a> 
</ul> 
</div> 
</div> 





Home 


LU Q i 


Home Contacts Events 














图 3-10: 使 用 图 标 是 可 用 性 与 视觉 展现 的 好 办 法 


使 用 标准 的 jQuery Mobile 创建 自 定义 图 标的 方法 ， 可 以 在 元 素 上 放置 任 
Wa. 何 导航 图 标 。 互 联网 上 有 大 量 的 免费 图 标 ， 其 中 最 流行 的 可 以 参考 http:// 


iÍ 
e. 














glyphish.com, 


2. 被 选中 的 元 素 

每 个 导航 栏 都 可 以 有 一 个 被 选中 的 元 素 ， 使 用 ui-btn-active 标识 。 激 活 的 元 素 
会 在 当前 主题 的 UI 基础 上 高 亮 〈《 对 默认 主题 来 说 是 亮 监 色 ) 。 图 3-11 显示 了 默认 色 
样 的 选中 样式 。 

















Eg Contacts Events News 


3-11; 被 选中 的 状态 使 用 一 种 不 同 的 色 样 清晰 地 显示 














^ 
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将 一 个 导航 栏 作为 Web 应 用 的 主导 航 时 ， 最 好 将 主页 作为 第 一 个 元 素 ， 同 时 最 好 在 
第 一 个 a 元素 上 加 上 c1ass-"ui-btn-active" 以 便 将 它 标记 为 已 选中 。 例 如 : 


«div data-role="footer" data-position="fixed"> 
«div data-role="navbar"> 
«ul» 
<li><a href-"findex" class-"ui-btn-active"»Homec/a» 
<li><a href="#contacts">Contacts</a> 
<li><a href="#events">Events</a> 
<li><a href="#news">News</a> 
«/ul» 
</div> 
</div> 


用 户 操 作 导航 元 素 时 ， 当 前 选中 元 素 会 自动 切换 为 选中 状态 。 也 就 是 说 ， 我 们 不 需 
要 自己 更 新 ui-btn-active 类 。 这 也 意味 着 ， 我 们 可 以 使 用 基于 JavaScript 的 事件 
处 理 程序 来 管理 每 个 元 素 的 点 击 事件 并 改变 UI 以 及 /或 者 页 面 导航 ， 同 时 导航 栏 的 
选中 状态 将 会 自动 更 新 。 





3.1.6 固定 页 脚 

关于 导航 栏 有 一 点 需要 理解 ， 如 果 改 变 了 当前 jQuery Mobile 文档 ， 则 当前 页 脚 会 
被 移 除 ， 然 后 显示 一 个 新 的 页 脚 。 这 意味 着 可 能 会 出 现 一 些 泻 染 问题 ， 比 如 选中 状 
态 ( 消 失 又 出 现 ， 或 随 着 页 面 过 渡 出 现 动 画 )。 要 解决 这 个 以 及 许多 其 他 相关 问题 ， 
可 以 使 用 固定 页 脚 。 固 定 页 脚 一 旦 定义 ， 就 会 固定 在 DOM 上 ， 不 随 页 面 改变 而 改 
变 ， 这样 在 切换 页 面 时 就 不 再 会 有 任何 视觉 上 的 小 问题 了 。 








jQuery Mobile 中 没有 官方 支持 的 定义 固定 页 头 的 方法 。 有 一 些 实现 方法 使 
ED 用 固定 页 脚 以 及 一 些 Css 技巧 来 将 页 脚 的 位 置 改 到 顶部 。 














要 创建 固定 工具 栏 ， 只 需 在 每 个 需要 的 页 面 的 固定 页 脚 上 定义 一 个 data-ia 标识。 
然后 ， 任 何 有 相同 aaca-ia 的 页 脚 的 页 面 都 将 保持 前 一 个 页 脚 而 不 会 更 新 。 


我 们 还 需要 在 各 个 页 面 中 使 用 同样 的 页 脚 代 码 ， 可 能 需要 更 新 被 选中 的 项 。 使 用 导 
航 栏 和 固定 页 脚 前 进 及 后 退 有 一 个 新 问题 : 如 何 保持 选中 状态 。 为 了 解决 这 个 问 
题 ， 使 用 固定 页 脚 上 的 导航 栏 时 ， 要 在 选中 项 上 加 两 个 类 : ui-btn-active 和 ui- 


State-persist, 


来 看 一 个 完整 的 例子 ， 其 中 包含 一 个 作为 固定 页 脚 的 导航 栏 ， 导 航 栏 中 有 两 个 页 面 。 
结果 见 图 3-12。 
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-Ee 国定 页 脚 应 该 使 用 data-position-"fixed" 定义 为 固定 定位 。 











<!DOCTYPE html» 
«html» 
«head» 
«1-- 这 儿 放 置 典型 的 jQuery Mobile 头 部 --- 
«/head» 

















«body» 
«div data-role-"page" id-"home"- 


«div data-role-"header"- 
<hl>Home</h1> 


</div> 
<div data-role="content"> 
<p>This is content for the home</p> 


</div> 


<div data-role="footer" data-id="main" position="fixed"> 
<div data-role="navbar"> 


<ul> 
<li><a data-icon="home" class="ui-btn-active ui-state-persist"> 
Home</a></li> 
<li><a href="#help" data-icon-"alert"»Help«/a»«/li» 
</ul> 
</div> 
</div> 
</div> 


<div data-role="page" id="help"> 


<div data-role="header"> 
«h15Help«/h1» 
</div> 


<div data-role="content"> 
<p>This is content for Help</p> 
</div> 


<div data-role="footer" data-id="main" position="fixed"> 
<div data-role="navbar"> 
<ul> 
<li><a href="#home" data-icon="home">Home</a></li> 
<li><a data-icon="alert" class="ui-btn-active ui-state-persist"> 
Help</a></1i> 
</ul> 
</div> 
</div> 





«/div» 


«/body» 
</html> 





Help 


This is content for Help ontent for Help This is content for the home 














3-12: 使 用 固定 页 肢 


3.2 ”格式 化 内 容 


SUE, 我们 看 一 看 Web 应 用 的 内 容 区 域 。 最 重要 的 一 点 : Æ <div data-role= 
"content"> 内 任何 HTML 代码 都 能 工作 。 


jQuery Mobile 的 每 个 主题 都 包含 民 好 的 样式 ， 其 中 每 个 标准 元 素 的 内 边 距 、 外 边 
距 、 尺 寸 以 及 颜色 都 已 针对 当前 主题 及 移动 设备 优化 过 ， 被 定义 过 样式 的 元 素 包 括 
PX、 链 接 、 粗 体 及 斜体 文本 、 引 用 、 列 表 以 及 表格 等 。 





如 果 想 为 内 容 提 供 自 定义 的 CSS 格式 ， 需 要 注意 主题 系统 以 避免 修改 主题 
心 。 时 引起 UI 问题 。 本 书后 面 会 有 更 多 关于 主题 与 自 定义 的 内 容 。 
nu 
除了 基本 的 HTML 7538, jQuery Mobile 也 提供 了 一 些 使 用 data-role 定义 的 组 
件 。 就 像 前 面 看 到 的 ， 在 页 头 及 页 脚 处 ， 诸 如 hx 或 a 在 内 的 一 些 元素 有 自动 组 件 
泻 染 行为 。 在 内 容 区 域 ， 除 了 一 些 表单 元 素 外 的 其 他 元 素 都 没有 这 种 行为 ， 第 5 章 
我 们 会 进一步 介绍 。 


3-13 展示 了 一 些 基本 HTML 元 素 在 jQuery Mobile 默认 主题 下 的 泻 染 效果 。 
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图 3-13. 一 些 基 本 HTML 元 素 在 默认 主题 下 的 泻 染 效 果 


3.2.1 "ETE PES 

别 忘 了 我 们 的 目标 是 移动 设备 。 在 移动 设备 上 ， 空 间 非常 有 限 ， 这 正 是 可 折 秋 内 容 
的 用 武之 地 。 可 折合 内 容 可 以 通过 关联 的 JavaScript 行为 ， 在 触摸 某 个 标题 或 按钮 
时 隐藏 或 者 显示 。 
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jQuery Mobile 已 经 为 这 种 UI 设计 模式 提供 了 支持 ,不 需要 我 们 再 编写 JavaScript, 
要 创建 可 折 且 内容， 只 需 定义 一 个 带 有 data-role="collapsible" 的 容器 。 这 个 
容器 需要 一 个 hx 元 素 作为 标题 ， 同 时 用 作 开 关 按 钮 。 可 折 倒 内 容 则 是 容器 内 除 
标题 外 的 任何 HTML 代码 。 


默认 情况 下 ， 页 面 加 载 时 jQuery Mobile 会 打开 折 又 内容 。 可 以 在 容器 上 使 用 
data-collapsed-"true" 来 让 它 默 认 收 起 。 


来 看 一 个 例子 : 





«div data-role-"content"-» 


«div data-role-"collapsible"- 
«h22History of Rome</h2> 
«p»There is archaeological evidence of human occupation of the Rome area 
from at least 14,000 years, but the dense layer of much younger debris 
obscures Palaeolithic and Neolithic sites.[11] Evidence of stone tools, 
pottery and stone weapons attest to at least 10,000 years of human 
presence. 
«/p» 
«/div» 


«div data-role-"collapsible" data-collapsed-"true"- 
«h2»2Government of Rome</h2> 
«p»Rome constitutes one of Italy's 8,101 communes, and is the largest both 
in terms of land area and population. It is governed by a mayor, 
currently Gianni Alemanno, and a city council. 











</p> 
</div> 
</div> 
如 图 3-14 所 示 ，jQuery Mobile 了 加 号 图 标 和 减 号 图 标 ， 分 别 用 作 打 开 和 关闭 
按钮 。 在 写作 本 书 的 时 候 ， 还 不 能 自 定 义 这 些 图 标 。 

















Carrier © 12:34 PM. um 





©) History of Rome 





©) Government of Rome 





Rome constitutes one of Italy's 8,101 communes, and is the 
largest both in terms of land area and population. It is governed by 
a mayor, currently Gianni Alemanno, and a city council. 


-— Y 











3-14: 可 折 匣 面板 是 在 同一 个 页 面 上 展示 大 量 信息 的 好 方法 ， 用 户 可 以 自己 关闭 或 打开 细节 
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和 其 





他 富 控件 一 样 ， 可 以 使 用 aata-theme 来 改变 这 个 可 折合 面板 的 色 样 。 还 可 以 





指定 额外 的 data-content-theme 属性 ， 这 个 属性 只 影响 内 容 ， 而 不 会 影响 可 折 巷 
面板 的 打开 、 收 起 按钮 。 








如 果 在 可 折合 容器 中 没有 定义 hx 元素 ， 则 内 容 将 处 于 打开 状态 且 不 能 收 





一 CS》 起。 如果 定义 了 多 个 hx 元 素 ， 则 第 一 个 会 被 用 作 标 题 ， 其 他 的 将 被 演 染 





为 内 部 的 内 容 。 


府 套 的 可 折 双 内容 
可 折 王 内 容 面板 可 以 嵌 套 ，jQuery Mobile 会 自动 在 每 一 级 可 折 革 面板 上 添加 外 边 
距 。 为 避免 让 UI 及 DOM 过 于 复杂 ， 建 议 不 要 添加 超过 两 级 的 髓 套 : 


<div data-role="content"> 
«div data-role="collapsible"> 


<h2>Rome</h2> 
«div data-role="collapsible"> 
<h3>History</h3> 


<p>There is archaeological evidence of human occupation of the 
Rome area from at least 14,000 years, but the dense layer 
of much younger debris obscures Palaeolithic and Neolithic 
Sites. [11] Evidence of stone tools, pottery and stone weapons 
attest to at least 10,000 years of human presence. </p> 

«/div» 
«div data-role-"collapsible" data-collapsed-"true"- 

«h3»Government-/h3-» 

«p»Rome constitutes one of Italy's 8,101 communes, and is the 
largest both in terms of land area and population. It is governed 
by a mayor, currently Gianni Alemanno, and a city council. «/p» 

«/div» 
«/div» 


«div data-role-"collapsible"'- 
<h2>Madrid</h2> 
«div data-role="collapsible"> 
<h3>History</h3> 
<p>Although the site of modern-day Madrid has been occupied since 
pre-historic times, [23] in the Roman era this territory belonged 
to the diocese of Complutum (present-day Alcalá de Henares) .</p> 
«/div» 
«div data-role-"collapsible" data-collapsed-"true"- 
«h3»Government-/h3-» 
<p>The City Council consists of 57 members, one of them being 
the Mayor, currently Alberto Ruiz-Gallardón Jiménez. The Mayor 
presides over the Council.«/p» 
</div> 
</div> 
</div> 





3.2.2 手风琴 部 件 

竺 风琴 部 件 是 男 一 个 典型 的 与 可 折 双 内容 相 关 的 富 Internet 应 用 ， 它 允许 将 多 个 可 
折 释 内 容 聚 合 起 来 ， 这 样 一 次 只 有 一 个 面板 可 见 ， 即 当 你 看 见 某 个 面板 时 ， 所 有 其 
他 面板 都 已 被 收 起 。 


jQuery Mobile 以 可 折 又 集合 的 形式 支持 这 种 部 件 。 也 就 是 一 个 带 有 data- 
role-'collapsible-set" 的 容器 以 及 一 组 作为 子 元 素 的 可 折 双 面板。 








对 一 个 可 折 倒 集合 应 用 data-theme 或 data-content-theme 时 ， 除 非 另 有 定义 ， 
否则 所 有 的 子 元 素 都 将 继承 这 些 值 。 


模板 如 下 : 


<div data-role="collapsible-set"> 
<div data-role="collapsible"> 
«l1-- 可 折 和 县 标题 及 内 容 -=> 
</div> 
<!-- 任意 数量 的 可 折 登 内 容 --> 
«div data-role-"collapsible"- 
«l1-- 可 折 和 县 标题 及 内 容 = 
</div> 
</div> 











默认 情况 下 , jQuery Mobile 会 展开 可 折 生 集合 中 的 最 后 一 个 面板 。 如 果 想 默 
C 认 展 开 别 的 面板 ， 只 需 在 想 展 开 的 元 素 上 加 上 data-collapsed-"false" 
并 且 在 所 有 其 他 面板 上 加 上 data -collapsed-"true", 
































来 看 一 个 例子 : 


«div data-role="page" id="home"> 


«div data-role-"header"- 
«hl»Gfirt«/h1» 
</div> 


«div data-role="content" data-theme="b"> 


<!-- 这 儿 定义 了 整个 可 折 倒 集合 (手风琴) --> 
<div data-role="collapsible-set"> 
<div data-role="collapsible" data-collapsed="false"> 
<h2>Books</h2> 

«ul» 
«li»Programming the Mobile Web</1i> 
«li»jQuery Mobile: Up & Running-/li» 
«li»Mobile HTML5«/1li» 

«/ul» 

</div> 
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«div data-role-"collapsible" data-collapsed-"true"- 
«h2»Talks«/h2» 
<ul> 
<li>Velocity Conference</li> 
<li>OSCON</li> 
<li>Mobile World Congress</li> 
«li»Google DevFest</li> 
</ul> 
</div> 
</div> 


«1-- AERA (手风琴 ) 结束 --> 
«/div» 


«/div» 


图 3-15 显示 了 一 个 可 折 肥 集合， 其 中 每 个 可 折 释 区 域 的 边框 样式 都 被 设置 为 带 圆 角 。 


o Books 











e Programming the Mobile Web 
e jQuery Mobile: Up & Running 
e Mobile HTML5 


图 3-15: 可 以 使 用 一 个 可 折 亚 面板 的 集合 来 创建 手风琴 富 控 件 ， 一 次 只 有 一 个 面板 可 见 











3.3 列 

jQuery Mobile 提供 了 一 些 用 于 将 内 容 按 列 显示 的 模板 ， 称 为 排版 网 格 。 这 些 网 格 的 
行为 类 似 表格 ， 但 没有 使 用 table 排版 带 来 的 语义 问题 (除非 是 表格 类 型 的 数据 ， 
不 然 不 要 使 用 table 排版 )。 








记 住 ， 你 的 应 用 将 运行 在 移动 设备 上 ， 使 用 列 应 该 小 心 ， 只 放 一 些小 元 素 ， 
MESS 如 按钮 、 链 接 或 小 项 目 。 如 果 目 标 设备 是 平板 电脑 ， 那 列 可 用 的 空间 则 会 


多 一 些 。 
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布局 网 格 使 用 CSS 类 来 定义 网 格 区 域 及 列 。 可 以 定义 2 至 5 列 的 网 络 。 网 格 是 不 可 
见 的 ， 占 满 全 部 100% 的 宽度 ， 没 有 内 外 边 距 。 


T| 





创建 网 格 只 需 使 用 块 容器 ，— 典 型 情况 为 div， 类 ui-grid-a 表 示 两 列 ，ui-grid-b 
表示 三 列 ，ui-grid-c 表 示 四 列 ，ui-grid-da 表 示 五 列 。 默 认 情况 下 ， 网 格 的 各 列 
宽度 相同 。 











每 个 单元 格 都 应 该 是 一 个 带 ui -block-<letter> 的 块 容器 ， 其 中 <letter> 的 值 
为 a 到 ee， 分 别 表 示 网 格 的 第 一 至 第 五 列 。 


让 我 们 用 HTMLS 中 的 新 元 素 section 来 尝试 一 个 基本 的 两 列 的 例子 ， 结 果 如 图 
3-16 所 示 : 














<div data-role="content"> 
«section class="ui-grid-a"> 
«div class="ui-block-a">Column 1«/div» 
«div class-"ui-block-b"»Column 2«/div» 


«/section» 
BENE EN 


</div> 
Column 1 Column 2 





Cell 1.1 Cell 1.2 Cell 1.3 
Cell 2.1 Cell 2.2 Cell 2.3 








B 3-16: 元 素 最 多 可 以 排列 为 五 个 等 宽 列 


布局 网 格 的 工作 方式 为 平 铺 排 版 ， 也 就 是 说 ， 如 果 添 加 的 单元 格 比 指定 的 列 数 更 多 ， 
则 相当 于 使 用 同一 个 网 格 模 拟 不 同 的 行 : 








<div data-role="content"> 
«section class="ui-grid-b"> 
eus 第 一 行 onus 
«div class-"ui-block-a"»Cell 1.1«/div» 
«div class-"ui-block-b"»Cell 1.2«/div» 
«div class-"ui-block-c"»Cell 1.3«/div» 
«1-- 第 二 行 --> 
«div class-"ui-block-a"»Cell 2.1«/div» 
«div class-"ui-block-b"»Cell 2.2«/div» 
«div class-"ui-block-c"»Cell 2.3«/div» 
«/section» 
</div> 
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3.4 $E 


我 们 已 经 看 到 ，a 元 素 可 被 用 于 创建 页 面 之 间 及 指向 外 部 内 容 的 链接 。 不 过 ， 典 型 
的 a 元素 的 泻 染 效果 并 不 适合 触摸 设备 ，a 元 素 通常 是 内 联 的 ， 只 有 文字 是 可 点 击 
区 域 ， 这 对 使 用 触摸 的 用 户 来 说 并 不 是 好 的 体验 ， 因 此 ，jQuery Mobile 提供 了 按钮 。 


按钮 是 一 种 UI 部 件 ， 感 觉 就 像 ……， 好 吧 ， 就 像 按 钮 。 它 是 一 个 带 文本 的 更 大 的 
可 点 击 区域 ， 可 能 还 有 图 标 。 


创建 按钮 的 方式 有 好 几 种 : 


。 使 用 button 元 素 ; 

。 使 用 会 被 泻 染 为 按钮 的 input 元 素 ， 包 括 type="button", type="submit", 
type-'reset" 以 及 type="image"i 

。 任何 带 有 data-role-"button" 的 a 元 素 。 


jQuery Mobile 的 按钮 一 般 的 泻 染 效果 为 带 有 居中 的 文字 、 圆 角 及 阴影 ， 取 决 于 浏览 
器 对 CSS3 的 支持 情况 
H a 

: 显示 一 组 按钮 时 ， 一 个 良好 的 UI 设计 模式 是 让 那个 肯定 按钮 或 者 最 有 可 能 

p^ 被 点 击 的 按钮 使 用 与 众 不 同 的 主题 。 


' * 





默认 情况 下 按钮 会 占 满 屏幕 的 整个 宽度 ， 即 每 个 按钮 会 独占 一 行 。 下 面 是 一 个 典型 
的 合子， 效果 见 图 3-17。 


«a href="#" data-role-"button"»Click me!</a> 
«button data-theme="b">Click me too!«/button» 
«input type="button" value-"Don't forget about me!"> 








| Click me! | 
Click me too! 
[ Don't forget about me! | 


[ Button 1 H Button 2 E Button 2 


3-17: 在 Web 应 用 中 ， 按 钮 是 为 触摸 设备 提供 交互 的 最 好 方法 




















3.4.1 内 联 按钮 
可 以 在 元 素 上 应 用 属性 daca-inline-"true" 来 创建 内 联 按钮 ， 这 种 按钮 不 会 占 满 
屏幕 宽度 。 这 样 ， 用 下 面 的 代码 可 以 在 同一 行 放置 三 个 按钮 〈 如 图 3-17 所 示 ) 。 








«a href="#" data-role-"button" data-inline-"true"»Button 1«/a» 
«a href="#" data-role-"button" data-inline-"true"»Button 2«/a» 
«a href="#" data-role-"button" data-inline-"true"»Button 2«/a» 





如 果 想 用 内 联 按钮 来 占 满 整 个 屏幕 宽度 ， 可 以 使 用 布局 网 格 来 定义 至 多 五 
个 列 ， 每 列 包含 一 个 按钮 。 








3.4.2 分 组 按钮 

如 果 有 若干 个 按钮 彼此 相关 ， 可 以 将 它们 组 合 起 来 ， 这 样 会 得 到 一 个 不 同 的 用 户 界 
面 ， 其 中 每 个 按钮 都 位 于 一 个 分 组 容器 中 。 在 jQuery Mobile 中 这 种 技术 被 称 为 分 
组 控件 ， 它 包含 一 个 叫 作 控件 组 的 新 部 件 以 及 一 组 按钮 。 





使 用 分 组 按钮 时 ， 不 要 将 它们 声明 为 内 联 按钮 。 











控件 组 只 是 一 个 容器 ， 一 般 为 一 个 带 data-role-"controlgroup" 的 div 元素 。 
下 面 这 个 分 组 将 包含 一 组 按钮 ， 看 起 来 与 图 3-17 类 似 : 





<div data-role="controlgroup"> 
<a href="#" data-role="button">Button 1</a> 
<a href="#" data-role="button">Button 2</a> 
<a href="#" data-role="button">Button 2</a> 
</div> 


如 图 3-18 所 示 ， 按 钮 在 垂直 方向 上 彼此 相连 。 也 可 以 通过 在 控件 组 上 使 用 aata- 
type-"horizontal" 属性 来 创建 一 个 水 平 布局 ， 如 图 3-19 所 示 : 











«div data-role="controlgroup" data-type="horizontal"> 
«a href="#" data-role-"button" data-inline="true">Button 1«/a» 
«a href="#" data-role-"button" data-inline-"true"»Button 2«/a» 
«a href="#" data-role-"button" data-inline-"true"»Button 2«/a» 
«/div» 
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Button 1 


Button 2 


Button 2 











683-18: 有 多 个 内 联 按钮 时 ， 最 好 将 它们 包装 到 控件 组 中 以 便 获 得 更 好 的 外 观 





Button 1 Button 2 Button 2 











3-19. 如 果 按 钮 数 少 于 5， 并 且 文 案 较 短 ， 可 以 使 用 水 平 控件 组 


四 


Ya 
*w^ 水 平 按钮 组 看 起 来 可 能 像 一 个 不 同 选项 的 选择 器 (可 按 下 按钮 )。 不 过 ， 到 
aa 
y 
4 





























. 目前 为 止 ， 它 们 还 只 是 组 合 到 一 起 的 按钮 ， 使 用 这 个 技术 时 它们 并 没有 被 
~ 选中 状态 。 本 书后 面 的 章节 将 涉及 处 于 按 下 状态 的 按钮 。 











3.4.3 ”效果 

默认 情况 下 ， 每 个 按钮 都 被 泻 染 为 带 圆 角 和 阴影 。 可 以 通过 布尔 值 属 性 data- 
cornters 和 data-shadow 来 改变 这 个 行为 。 本 书后 面 的 章节 会 讲解 如 何 使 用 
JavaScript 来 改变 这 两 个 属性 的 全 局 定义 。 


下 面 的 代码 创建 了 一 个 不 带 圆 角 和 边框 的 按钮 ; 




















«a href="#" data-role-"button" data-shadow-"false" data-corners-"false"-» 
Help</a> 


3.4.4 Elf 

jQuery Mobile 包含 一 个 强大 的 图 标 机 制 ， 人 允许 我 们 对 按钮 应 用 主题 ， 就 像 对 其 他 可 
设置 图 标的 部 件 所 做 的 一 样 。 因 此 ， 本 书后 面 的 章节 会 再 次 讨论 (其 他 部 件 的 ) 图 
标 ， 它 们 的 选项 、 图 标 库 以 及 功能 与 我 们 现在 正在 讨论 的 完全 一 致 。 

每 个 按钮 都 可 以 通过 data-icon 属性 定义 一 个 图 标 。 这 个 属性 接收 一 个 图 标 名 ， 名 
字 可 以 是 图 标 库 (框架 已 经 包含 的 图 片 ) 中 已 有 的 某 个 图 片 名 ， 也 可 以 自 定义 。 
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jQuery Mobile 1.0 中 可 用 的 图 标 见 表 3-1. 


表 3-1: jQuery Mobile 中 可 用 的 图 标 

































































图 标 描述 值 图 标 描述 值 
向 左 箭头 arrow-l 刷新 refresh 
向 右 箭头 arrow-r 向 前 动作 forward 
m ERA arrow-u 向 后 动作 back 
[e] Pis arrow-d 网 格 grid 
删除 (x) delete 星星 star 
加 号 plus 警报 (警号 图 标 ) alert 
减 号 minus 信息 (i) info 
检查 标记 check 主页 图 标 home 
齿轮 图 标 (设置) gear 搜索 图 标 search 




















记 住 ， 这 些 图 标 图 片 由 框架 提供 ， 位 于 下 载 的 ZIP 包 中 或 托管 在 CDN E. 
心 如 果 决 定 自己 托管 框架 文件 ， 或 者 正在 创建 一 个 戏 入 了 jQuery Mobile 的 
原生 应 用 ， 则 需要 确保 对 应 的 图 片 文件 夹 可 用 。jQuery Mobile 使 用 CSS 
Sprites 技术 来 减少 图 标 对 应 的 图 片 加 载 ， 图 标 有 低 分 辨 率 版 和 高 分 辨 素 两 
个 版 本 ， 框 架 会 自动 决定 使 用 哪个 版 本 。 
































图 3-20 显示 了 每 个 图 标的 浑 染 效果 。 
































(<) Left Arrow o Minus sign e Grid 
© Right Arrow o Checkmark o Star 
[^] Up Arrow © Gear icon 6 Alert 
eo Down Arrow © Refresh o Info 
e Delete Q Forward action | O Home 
© Plus sign © Back action \ Q Search 





3-20: jQuery Mobile 框架 中 包含 的 所 有 图 标 


3.4.5 创建 自 定 义 图 标 


想 使 用 自 定义 图 
机 制 为 < 应 用 名 >-< 








标 ， 只 需 在 data-icon 属性 中 定义 一 个 不 重复 的 名 字 。 推 荐 的 命名 
图 标 名 >， 例 如 : myapp-tweet. 





UI 组 件 


81 





on 


*] jQuery Mobile 会 自动 为 图 标 添 加 白色 圆 形 背景 ， 所 以 无 论 行 背景 是 什么 都 
Aa 

t 

4 

















AN a ` 会 有 问题 。 

jQuery Mobile 还 需要 我 们 创建 一 个 名 为 ui-icon-<name> HJ CSS 类 ， 例如 ui- 
icon-myapp-tweet， 其 中 指定 一 个 背景 图 片 。 为 了 减少 UI 问题， 图标 应 该 是 白色 
(或 透明 ) 背景 ，18 x 18 像素 ， 带 alpha 透明 的 PNG-8 格式 。 图 标 不 应 该 带 边框 ， 使 用 
列表 视图 时 框架 会 自动 添加 边框 。 图 标 还 应 该 比 18 x 18 像素 小 一 些 ， 因 为 它 将 被 泻 染 
在 一 个 18 像素 宽 的 圆 形 中 。 同 时 ， 由 于 图 标 会 被 绘制 在 圆 形 中 ， 所 以 不 要 使 用 边 角 。 


对 应 的 CSS 类 应 该 类 似 下 面 的 代码 : 




















<style> 
.ui-icon-myapp-tweet { 
background-image: url(icons/tweet.png); 
} 


</style> 





我 们 的 自 定义 图 标 在 iPhone 4, iPod Touch 4G 等 使 用 视网膜 显示 屏 的 高 分 辩 率 设备 
上 无 法 工作 ， 因 为 还 需要 一 个 该 图 标的 高 分 辩 率 版 本 。 要 实现 这 一 点 ， 需 提供 一 个 
备 选 的 CSS 选择 定义 。 图 片 则 应 该 扩大 一 倍 至 36 x 36 像素 。 为 低 分 辩 率 及 高 分 辨 
率 提供 同一 张 图 片 也 是 可 以 的 ， 不 过 ， 为 了 更 好 的 显示 效果 ， 推 荐 使 用 两 张 图 片 。 











如 果 某 些 CSS 样式 只 会 应 用 在 一 个 HTMLS jQuery Mobile 文档 上 ， 最 好 使 
SS 用 style 标签 将 它们 加 到 文档 中 ， 而 不 是 引用 外 部 资源 ， 以 便 提 高 性 能 。 
当然 ， 将 它们 与 其 他 CSS 写 在 一 起 会 更 简单 ， 但 考虑 一 下 添加 新 的 外 部 资 
源 时 的 性 能 吧 ， 除 非 你 有 一 个 活跃 的 缓存 策略 。 


要 提供 两 个 版 本 ， 只 需 使 用 CSS3 媒体 查询 格式 写 两 个 不 同 的 定义 。 第 一 个 定义 将 
应 用 到 所 有 分 辨 率 ， 第 二 个 则 将 应 用 到 两 倍 于 标准 分 辩 率 的 设备 〈 如 iPhone 4 或 更 
Wr) 上 。 需 要 强制 背景 尺寸 为 18 x 18， 因 为 在 这 些 设备 上 px 是 虚拟 的 点 ， 每 一 个 
对 应 两 个 真实 的 像素 。 对 应 的 CSS 类 现在 看 起 来 类 似 这 样 : 
































«style» 
.ui-icon-myapp-tweet { 
background-image: url(icons/tweet.png); 


) 


Gmedia only screen and (-webkit-min-device-pixel-ratio: 2) { 
.ui-icon-myapp-tweet { 
background-image: url(icons-hd/tweet.png) !important; 
background-size: 18px 18px; 


ew 


} 


</style> 
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让 我 们 看 看 标准 按钮 与 自 定 义 按 钮 的 对 比 ， 见 图 3-21。 自 定义 按钮 使 用 了 我 们 刚刚 
定义 的 CSS 样式 : 








«a href="#" data-role-"button" data-icon-"gear"-»Help«/a» 
«a href="#" data-role-"button" data-icon-"myapp-tweet"»Tweet«c/a» 





© Help 





o Tweet 














E 3-21: 可 以 为 按钮 及 其 他 UI 部 件 提供 自 定义 图 标 


3.4.6 ”图 标 位 置 

默认 情况 下 ， 每 个 图 标 都 被 演 染 在 按钮 文字 的 左 侧 。 可 以 使 用 data-iconpos 属性 
来 改变 这 个 位 置 ， 可 用 的 值 有 right、left (默认 值 )、bottom 以 及 top。 使 用 
bottom 或 top 时， 按钮 的 高 度 会 增加 ， 在 导航 栏 或 水 平分 组 按钮 中 这 两 个 属性 特 
别 有 用 。 


下 面 来 看 同一 链接 的 不 同 图 标 位 置 (参见 图 3-22) : 











«a href="#" data-role-"button" data-icon-"help" data-iconpos-"right"-2Help 
«/a» 
«a href="#" data-role-"button" data-icon-"help" data-iconpos-"left"sHelp«/a- 


«div data-role-"controlgroup"» 
«a href="#" data-role-"button" data-icon-"help" data-iconpos-"bottom"- 
Help</a> 
«a href="#" data-role-"button" data-icon="help" data-iconpos="top">Help </a> 
</div> 











Help 








图 3-22: 使 用 data-iconpos 可 以 将 图 标 放置 在 四 个 方向 的 任何 一 处 
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3.4.7 ARR SH 
jQuery Mobile 也 支持 没有 文字 的 按钮 。 由 于 这 种 按钮 对 触摸 界面 来 说 太 小 了 ， 因 此 
这 个 特性 并 不 常用。 要 创建 一 个 纯 图 标 按钮 ， 只 需 在 按钮 上 指定 data-iconpos- 


"notext", 








3.4.8 图 标 阴 影 
jQuery Mobile 包含 一 个 可 移 除 图 标 阴 影 效 果 的 属性 。 要 实现 这 个 效果 ， 只 需 在 按钮 
元 素 上 指定 data-iconshadow-"false", 
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列表 





到 现在 为 止 ， 我们 已 经 使 用 jQuery Mobile 创建 了 若干 非常 简单 的 页 面 。 下 一 步 是 
学 习 使 用 框架 提供 的 各 种 控件 和 视图 。 本 章 将 讨论 列表 。 几 乎 所 有 移动 项 目的 内 容 
中 都 至 少 会 包含 一 个 列表 ， 所 以 我 们 首先 关注 列表 。 


要 从 列表 的 定义 开始 说 起 有 点 儿 难 ， 大 家 都 知道 列表 是 什么 ， 作 为 一 个 通用 术语 ， 这 
儿 也 没有 新 东西 可 介绍 。 在 jQuery Mobile 的 世界 里 ， 列 表 就 是 页 面 中 的 一 个 有 序 
(ol 元 素 ) 或 无 序 (ul 元 素 ) 列表 ， 其 中 至 少 包含 一 个 列表 项 (1i 元 素 )， 并 且 使 
用 HTMLS 语法 data-role="1istview" 将 对 应 的 role 的 值 定义 为 1istview。 


如 果 只 想 显示 普通 的 无 序 或 有 序列 表 ， 只 需 使 用 标准 的 ul 或 ol HTML 元 素 即 可 ， 
记 住 不 要 给 它们 添加 任何 jQuery Mobile role 属性 。 


在 下 一 章 我 们 将 看 到 ， 列 表 在 jQuery Mobile 框架 中 是 一 个 强大 并 且 用 途 非常 广泛 
的 解决 方案 。 


最 典型 的 列表 是 无 序列 表 (ul)， 并 且 页 面 中 除了 这 个 列表 外 没有 别 的 内 容 。 来 看 
一 个 例子 ， 结 果 见 图 4-1 








<!DOCTYPE html» 
<html> 


<head> 

<meta charset="utf-8" /> 

<title>Up and Running with jQuery Mobile</title> 

«link rel="stylesheet" href-"jquery.mobile-1.0.min.css" /> 


85 


«script src-"jquery-1.6.4.min.js"»«/script» 

«Script type-"text/javascript" src-"jquery.mobile-1.0.min.js"» 
</script> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 


<body> 


<div data-role="page" id="main"> 
<div data-role="header"> 
<h1>HTML5 and APIs</h1> 
</div> 


<div data-role="content"> 
«ul data-role="listview"> 
«li»Offline Access 
«li»Geolocation API 
«li»Canvas 
«li»Offline Storage 
«li»New semantic tags 
«/ul» 
</div> 


</div> 


</body> 
</html> 





HTML5 and APIs 


Offline Access 
Geolocation API 
Canvas 

Offline Storage 


New semantic tags 











& 4-1: 典型 的 列表 视图 ， 各 行 的 泻 染 效果 很 适合 触摸 设备 





从 jQuery Mobile 框架 默认 使 用 的 行 高 可 以 发 现 ， 列 表 的 泻 染 已 为 触摸 操作 优化 过 。 
每 个 列表 项 都 自动 占 满 整 页 宽度 ， 这 是 典型 的 触 屏 设备 UI 模式 。( 对 长 列表 来 说 ， 
可 以 使 用 固定 工具 栏 。) 





记 住 ，jQuery Mobile 是 在 客户 端 工作 的 。 带 列表 的 文档 可 以 由 任何 服务 端 
平台 ， 如 PHP、Java、ASP.NET 或 Ruby 等 动态 生成 。 














也 可 以 使 用 o1 元 素来 创建 有 序列 表 。 不 过 ， 如 果 没 有 包含 带 链接 的 交互 行 的 话 ， 
它 的 外 观 与 使 用 ul 将 没有 区 别 ， 如 图 4-2 所 示 : 


<!DOCTYPE html> 

















<html> 
<head> 
«1-- 这 儿 放 置 典 型 的 jQuery Mobile 头 部 --> 
</head> 
<body> 


«div data-role="page" id="main"> 


«div data-role-"header"- 
«hl1»Chapters-/h1» 
</div> 


<div data-role="content"> 
«ol data-role-"listview"- 
«li»The Mobile Jungle 
«li»Mobile Browsing 
«li»Architecture and Design 
«li»Setting up your environment 
«li»Markups and Standards 
«li»Coding Markup 
«li»CSS for Mobile Browsers 
«li»JavaScript Mobile 
«li»Ajax, RIA and HTML5 
«li»Server-Side Browser Detection 
«li»Geolocation and Maps 
«li»Widgets and Offline webapps 
«li»Testing, Debugging and Performance 
«li»Distribution and Social Web 2.0 
«/ol» 
«/div» 


</div> 


</body> 
</html> 


这 个 例子 显示 了 jQuery Mobile 中 列表 行 的 演 染 效果 。 如 果 文 本 超出 了 一 行 ， 框 架 
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将 自动 调整 该 行 的 尺寸 。 


The Mobile Jungle 





Mobile Browsing 
Architecture and Design 
Setting up your environment 
Markups and Standards 
Coding Markup 

CSS for Mobile Browsers 
JavaScript Mobile 


Ajax, RIA and HTML5 











4-2: 对 非 交互 列表 而 言 ， 有 序列 表 与 无 序列 表 的 外 观 一 样 


四 





HTML5 不 使 用 XML 语法 ， 因 此 无 需 关 闭 所 有 标签 ， 如 1i 元 素 。 当 然 ， 
Wa. 如 果 你 不 习惯 ， 也 可 以 关闭 它们 (如 果 你 和 我 一 样 觉得 没 关 闭 的 11 很 刺 
UN 眼 的 话 ) 。 























4.1 整 页 列表 与 插入 列表 


默认 情况 下 列表 使 用 整 页 模式 ， 也 就 是 说 列表 将 有 覆盖 整个 页 面 内 容 ， 如 图 4-1 及 图 
4-2 所 示 。 不 过 ， 也 有 些 项 目 会 用 到 与 其 他 HTML. 内 容 混 合 的 列表 。 为 了 处 理 这 种 
情况 ，jQuery Mobile 提供 了 内 联 列表 。 要 定义 这 种 列表 ， 只 需 在 对 应 的 ul 或 ol 元 
素 上 添加 qata-inset="true" 即 可 : 








«ol data-role-"listview" data-inset="true'"> 
< l== 行 元 素 --» 
«/ol» 


在 图 4-3 中 可 以 看 到 之 前 的 例子 使 用 内 联 模式 演 染 的 效果 。 从 图 中 可 以 看 到 ， 表 格 
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的 外 观 与 之 前 有 些 不 同 ， 与 页 面 中 其 他 内 容 之 间 的 边 距 更 大 ， 同 时 还 添加 了 圆 角 等 
CSS3 特效 。 





HTML5 and APls 


This is a list of HTML5 
new features 


Offline Access 
Geolocation API 
Canvas 

Offline Storage 


New semantic tags 











E 4-3: 内 联 表 格 有 着 不 同 的 外 观 ， 可 以 与 其 他 内 容 共享 一 个 页 面 ， 包 括 其 他 列表 














可 以 通过 ul 元素 上 的 aata-theme 属性 指定 整个 列表 的 色 样 ， 也 可 以 为 
Wa. 每 个 11 元 素 单独 指定 色 样 。 
H^ 用 内 联 列表 可 以 设计 出 包含 多 个 表格 的 页 面 ， 表 格 之 间 还 可 以 插入 其 他 内 容 。 


























"EAN = 
4.2” 视 党 分 隔 符 
分 隔 符 用 于 将 一 个 列表 划分 为 两 个 各 自 带 标题 的 部 分 ， 如 图 4-4 所 示 。 在 iPhone 及 
iPad 等 iOS 移动 操作 系统 上 ， 这 是 一 个 常用 的 设计 模式 。 要 在 jQuery Mobile 中 实现 
这 个 功能 ， 只 需 在 1i 元 素 上 使 用 新 的 role 属性 : data-role-"list-divider", 











注意 列表 分 隔 符 也 是 标准 的 1i 元 素 ， 只 是 role 不 同 ， 它 们 和 普通 行 在 


ES DOM 村 中 是 同 级 的 。 


可 以 使 用 这 个 技术 将 列表 元 素 划 分 为 不 同 的 组 ， 例 如 在 展示 以 字母 排序 的 数据 时 可 
以 用 A-Z 的 字母 (或 者 其 他 任何 分 类 方法 ) 分 组 。 可 以 通过 改变 色 样 的 方式 高 亮 每 
个 分 隔 符 。 




















来 看 一 个 简单 的 例子 : 


<!DOCTYPE html» 
<html> 


<head> 
«1-- 这 儿 放 置 典型 的 jQuery Mobile 头 部 --> 
«/head» 


«body» 

















«div data-role-"page" id-"main"- 


«div data-role-"header"- 
«hl1»World Cup</hi> 


</div> 


<div data-role="content"> 
«ul data-role-"listview"- 


«/div» 


«li data-role-"list-divider"»Group A 
«li»Argentina 

«li»Nigeria 

«li»England 

«li»Japan 

«li data-role-"list-divider"»Group B 
«li»United States 

«li»sMexico 

«li»Korea 

«li»Greece 

«li data-role-"list-divider"»Group C 
«li»Germany 

«li»Finland 

«li»Chile 

«li»South Africa 


«/ul» 


«/div» 


«/body» 
</html> 





Em 














如 果 列 表 是 用 JavaScript 等 客户 端 代 码 生 成 的 ， 在 生成 之 后 必须 调用 一 个 
刷新 方法 ， 通知 框 架 应 用 改变 并 正确 演 染 列表 。 后 面 我 们 会 谈 到 这 些 技术 ， 
现在 只 需要 知道 ， 如 果 页 面 上 只 有 一 个 列表 ， 页 面 ia 为 pagel， 则 对 应 
的 jQuery 代码 将 形 如 $ ("#pagel ul").listview("refresh"), 


图 4-4 展示 了 列表 分 隔 符 的 效果 。 























World Cup 





Argentina 
Nigeria 
England 
Japan 
United States 
Mexico 
Korea 


Greece 











图 4-4. 上 图 展示 了 行 分 隔 符 在 列表 中 的 泻 染 效果 


4.3 ”交互 行 

列表 具备 了 触摸 交互 功能 后 将 更 加 强大 。 

如 果 一 个 列表 元 素 包 含 a 元 素 ， 则 该 行 会 被 转换 为 一 个 可 响应 触摸 及 /或 鼠标 导航 
的 交互 行 。jQuery Mobile 有 一 个 很 好 的 特性 ， 只 要 革 行 中 包含 链接 ， 无 论 这 个 链接 
在 行 中 的 什么 位 置 ， 该 行 整 行 都 会 响应 触摸 事件 ， 也 就 是 说 用 户 不 用 非得 点 击 在 链 
接 文 本 的 区 域 ， 只 需 点 在 行内 的 任何 一 个 位 置 即 可 。 





uva. 域 需要 足够 大 以 避免 误 点 。 交 互 行 中 的 文本 也 会 更 大 一 些 。 在 基于 iOS 的 
设备 上 ， 大 多 数控 件 都 建议 使 用 44 像素 的 尺寸 。 甚 他 设备 则 使 用 小 一 些 的 
尺寸 。 


交互 行 的 高 度 与 只 读 行 不 同 ， 这 是 为 触摸 交互 优化 过 的 设计 ， 因 为 触摸 区 
a^ 
t 

4 











jQuery Mobile 会 自动 在 交互 行 的 右 侧 添加 漂亮 的 第 头 ， 提 醒 用 户 该 行 是 可 触摸 的 ， 
如 图 4-5 所 示 。 可 以 用 qata-icon 来 改变 这 个 图 标 ， 见 下 面 的 示例 。 











同一 个 列表 中 可 以 混合 使 用 交互 行 和 只 读 行 。 不 过 ， 列 表 的 典型 UI 设计 是 要 么 全 





是 交互 行 ， 要 么 全 是 只 读 行 。 





下 面 是 一 个 交互 行 的 实例 ， 见 图 4-5; 


<!DOCTYPE html» 
<html> 


<head> 














«1-- 这 儿 放 置 典型 的 jQuery Mobile 头 部 --> 





«/head» 


«body» 


«div data-role-"page" id-"main"-» 


«div data-role-"header"- 
«hl»Interactivec/h1» 


</div> 


<div data-role="content"> 
«ul data-role="listview"> 


<li><a 
<li><a 
<li><a 


<li><a 
<li><a 
</ul> 
</div> 


</div> 


</body> 
</html> 


href="#page2">Internal Page link</a> 
href="other.html">External Page link</a> 
href="http://www.mobilexweb.com">Absolute external link</a> 


href="tel:+13051010200">Call to a phone number using a link</a> 
href="javascript:alert ('Hi!')">Javascript link</a> 








Internal Page link 
External Page link 
Absolute external link 


Call to a phone number usi... 


o0000 


JavaScript link 








图 4-5: 交互 行 只 是 包含 超 链接 的 列表 元 素 ， 它 1 


区 域 


门将 自动 被 转换 为 可 响应 点 击 或 触摸 事件 的 








如 图 4-5 所 示 ， 使 用 交互 行 时 ，jQuery Mobile 会 尝试 保持 各 行 统一 行 高 。 因 此 ， 如 
上 面 第 四 行 的 标题 所 示 ， 当 某 行 的 标题 超过 了 一 行 时 jQuery Mobile 会 裁剪 该 行文 
本 ， 并 在 支持 CSS3 的 设备 上 在 文本 最 后 添加 省 略 号 。 如 果 没 有 显示 完整 文本 的 详 
情 页 面 的 话 ， 最 好 让 各 行 标题 的 文本 尽量 简短 。 


a 元 素 必 须 在 1 标签 内 ， 不 需要 插入 行 标题 作为 链接 内 容 。 空 链接 也 可 以 工作 : 














<li><a href="#page2"> Internal Page link </a> 


在 一 些 支 持 鼠 标 或 焦点 导航 的 设备 上 ， 如 BlackBerry z Android， 用 户 可 能 会 使 用 
键盘 或 轨迹 球 (trackball) 进行 导航 。 激 活 一 行 (通过 某 个 OK 键 或 按 下 轨迹 球 ) 
时 该 列表 元 素 内 的 链接 将 被 激活 。 从 图 4-6 中 可 以 看 到 ， 在 Android 设备 上 ， 浏 览 
器 为 选中 行 添加 了 一 个 通 营 为 栖 色 的 焦点 边框 




















3 ME Pv 





http://10.0.2.2/jqm/ch4/... 内 


Internal Page link 
External Page link 


Absolute external link 


Call to a phone number usi... 


oe00/^020 


JavaScript link 











图 4-6: 在 基于 焦点 的 浏览 器 上 ， 可 以 通过 鼠标 键 或 轨迹 球 来 浏览 交互 列表 
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推荐 在 页 面 中 使 用 交互 列表 来 创建 链接 ， 而 不 是 单 用 a 标签 ， 因 为 前 者 专门 为 触摸 
及 基于 鼠标 的 导航 优化 过 。 


用 户 点 击 一 个 交互 行 时 ，jQuery Mobile 内 会 产生 一 个 页 面 转向 动作 ， 在 转向 或 从 网 
络 下 载 新 页 面 期 间 被 点 击 的 行 会 处 于 选中 状态 ， 并 使 用 不 同 的 色 样 ， 如 图 4-7 所 示 。 





Interactive 


Internal Page link 


i 


loading 





Call to a phone number usi... 


JavaScript link eG 











4-7; AP-T, EXER RAGOJE RDUJSTESR, TAAA ERKE 
可 以 使 用 1i 元 素 上 的 data- icon 属性 来 改变 交互 行 的 默认 图 标 ， 例 如 : 

«li data-icon-"info"»«a href="#moreinfo">More information</a></1i> 
也 可 以 通过 指定 data-icon 的 值 为 特殊 值 false 来 移 除 交互 行 的 图 标 : 


«li data-icon-"false"»«a href="#page2">No icon interactive row</a></1i> 


4.3.1 ARIK 
ARRIR jQuery Mobile 的 一 个 很 棒 的 特性 。 如 果 想 在 不 同 的 页 面 显示 继承 结构 
或 导航 ， 比 如 “ 洲 > 国 家 > 城市 ”"， 则 可 以 使 用 内 婴 列 表 。 
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NH vi A He pr T ^ sz (一 个 指定 role 的 列表 ) 某 项 中 的 另 一 个 列表 视 
图 。 例 如 ， 可 以 在 某 个 ui 中 的 1i 内 再 包含 一 个 ul。jQuery Mobile 会 隐 式 地 为 每 
个 内 髓 列表 生成 一 个 页 面 ， 如 同 我 们 显 式 生成 的 一 样 ， 并 会 自动 处 理 各 个 层级 的 联系 。 








内 符 列 表 会 使 用 不 同 的 泻 当 主题， 以 便 用 户 能 在 视觉 上 识别 出 它 是 一 个 二 级 列表 。 
当然 ， 也 可 以 使 用 后 面 会 讲 到 的 aata-theme 来 显 式 地 指定 主题 。 

于 是 ， 在 一 个 页 面 上 就 能 有 不 同 层级 的 导航 。 页 面 加 载 时 ，jQuery Mobile 只 会 显示 
第 一 级 的 列表 项 ， 每 个 包含 内 格 列 表 的 列表 项 都 会 成 为 交互 行 。 用 户 选择 这 样 的 行 
时 会 转向 显示 下 一 级 列表 视图 的 新 页 面 ， 对 应 的 后 退 操 作 将 返回 上 一 个 层级 。 

内 内 列 表 的 层级 数量 没有 限制 ， 不 过 ， 如 果 层 级 及 列表 项 很 多 ， 最 好 使 用 不 同 的 页 
面 ， 以 便 减少 DOM 和 初始 化 加 载 的 时 间 。 推 荐 只 在 特定 情形 下 使 用 内 岁 列 表 ， 可 
不 要 把 整个 站 点 都 放 在 一 个 内 骨 列 表 里 。 

当然 ， 内 租 列 表 和 普通 交互 行 可 以 混合 使 用 。 因 此 ， 可 以 创建 这 样 的 列表 ， 其 中 一 
些 列 表 项 指 癌 其 他 文档 或 页 面 ， 另 一 些 列表 项 则 包含 内 租 列 表 。 

除了 ul 或 ol 之 外 ， 记 得 在 对 应 的 1i 中 添加 额外 的 文本 ， 因 为 框架 需要 为 隐 式 创 
建 的 页 面 中 的 交互 项 显示 一 个 标题 。 


因此 ， 一 个 典型 的 内 柳 列 表 看 起 来 像 这 样 : 

















«li» 
Item title 
«ul data-role-"listview"» 
«Less RJA FE mum 
«/ul» 


让 我 们 创建 一 个 示例 ， 结 果 如 图 4-8 所 示 : 


<!DOCTYPE html» 
<html> 

















<head> 

«1-- 这 儿 放 置 典 型 的 jQuery Mobile 头 部 --> 
</head> 
<body> 


<div data-role="page" id="main"> 
«div data-role="header"> 
«hl»Training-/h1» 


«/div» 


«div data-role-"content"-» 
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«ul data-role-"listview"- 
<li><a href-"order.html"»Order Now!«/a» 
«li»Cities available 

«ul data-role-"listview"- 
«li»Boston 
«li»New York 
«li»Miami 
«li»San Francisco 
«li»San Jose 

«/ul» 


«li»Topics 
«ul data-role-"listview"» 
«li»Intro to Mobile Web 
«ul data-role-"listview"» 
«li»WML and other oldies 
«li»XHTML MP 
«li»HTML 4.01 
«li»HTML5 
«/ul» 
«li»Mobile Browsers 
«ul data-role-"listview"- 








«li»Safari for iOS 
«li»Android Browser 
«li»Firefox for Mobile 
«li»Opera 
«/ul» 
«li»Tablet Browsers 
«li»Using jQuery 
«/ul» 


«li»Promotions 
«ul data-role-"listview"- 
«li»10$ off before May 
<li><a href-"promo3x2.html"»3x2«/a» 
«li»10$ off to subscribers 
«/ul» 


«/ul» 
«/div» 


«/div» 


«/body» 
</html> 
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在 图 4-8 rh «TEILE SU SE FH ERRAI A RIR E A HUC SE TRU 





EARP, jQuery Mobile 会 自动 使 用 行 中 的 文本 作为 新 创建 的 页 面 的 标 








Order Now! © Boston 

New York 
Cities available © 

Miami 
Topics © San Francisco 
Promotions o San Jose 











图 4-8: 内 嵌 列 表 的 导航 看 起 来 像 有 不 同 的 页 面 ， 但 实际 上 并 没有 创建 新 页 面 


^a 

















通过 一 些 jQuery Mobile 技巧 ， 可 以 创建 能 自动 更 改 URL. 散 列 值 的 链接 ， 
指向 内 嵌 列 表 自 动 生成 的 页 面 。 不 过 ， 如 果真 需要 用 到 这 个 功能 的 话 ， 恐 
怕 最 好 还 是 显 式 地 创建 外 部 页 面 ， 而 不 要 用 内 嵌 列 表 。 














4.3.2 ”分割 按钮 列表 

有 时， 我 们 需要 在 同一 行 包含 两 个 交互 操作 。 最 常见 的 场景 是 一 个 详情 操作 和 一 个 
编辑 操作 。 

例如 ， 把 联系 人 姓名 在 表格 中 列 出 时 ， 可 以 提供 两 个 可 能 的 操作 : 查看 详情 和 编辑 。 
为 了 实现 这 一 点 ，jQuery Mobile 使 用 了 分 害 行 控件 。 如 果 一 个 列表 项 1i 包含 两 个 
超 链接 (a 元素 )， 则 它 将 被 自动 当 作 分 割 行 处 理 。 

如 图 4-9 所 示 ， 各 行 被 分 割 成 了 左右 两 部 分 。DOM 中 的 第 一 个 链接 会 被 用 作 第 一 个 
操作 ， 即 该 行 左 侧 的 操作 。 第 二 个 链接 会 被 用 作 另 一 个 操作 ， 即 该 行 右 侧 的 操作 。 
第 二 个 链接 操作 的 链接 中 可 以 不 包含 文本 ， 事 实 上 第 一 个 链接 操作 中 也 可 以 没有 文 
本 。 如 果 让 a 链接 内 容 为 空 ， 那 么 它 将 被 应 用 到 整 行 上 。 








根据 iOS 用 户 界面 准则 ， 第 一 个 操作 应 该 是 详情 ， 第 二 个 操作 应 该 是 编辑 。 
Wa. 不 过 这 并 不 是 强制 规定 。 














Bill Gates 
Steve Jobs 


Mark Zuckerberg 


Larry Page 








图 4-9: 分 割 行 允 许 我 们 在 一 行 中 包含 两 个 操作 ， 一 个 用 于 典型 操作 ， 另 一 个 带 特殊 图 标的 
位 于 右 侧 


默认 情况 下 ，jQuery Mobile 会 为 右 侧 的 按钮 (第 二 个 操作 ) 使 用 一 个 带 边 框 的 箭头 
图 标 ， 与 标准 交互 行 稍 有 不 同 。 


可 以 在 对 应 的 ul 标签 上 通过 data-split-theme 来 为 右边 的 图 标定 义 不 同 的 主题 。 
看 一 个 例子 ， 结 采 如 图 4-10 所 示 : 














<!DOCTYPE html» 

















<html> 
<head> 
«1-- 这 儿 放 置 典 型 的 jQuery Mobile 头 部 --> 
«/head» 
«body» 


«div data-role-"page" id-"main"-» 


«div data-role-"header"- 
«hl»Your Friends-/h1» 
</div> 


<div data-role="content"> 
«ul data-role="listview"> 
<li><a href="details/bill">Bill Gates</a> 
<a href="edit/bill"></a> 








<li><a href-"details/steve"»Steve Jobs«/a» 
«a href-"edit/steve"»«/a» 


<li><a href-"details/mark"»Mark Zuckerberg</a> 
«a href-"edit/mark"»«/a» 


<li><a href-"details/larry"»Larry Page</a> 
«a href-"edit/larry"»«/a» 





«/ul» 
</div> 


</div> 


</body> 
</html> 








Bill Gates @  BillGates 


~ 


loading loading 





Larry Page Larry Page 














图 4-10: 如 图 所 示 ， 分 害 行 的 每 个 区 域 都 有 自己 的 选中 状态 


可 以 使 用 aata-split-icon 来 修改 第 二 个 操作 的 图 标 ， 这 个 属性 需 应 用 在 列表 自 
身上 (ul 或 ol 元 素 ) ， 而 不 是 列表 项 上 (1i 元 素 )。 


列表 视图 与 按钮 (下 一 章 会 讲 到 ) 使 用 同一 组 图 标 ， 不 过 带 圆 角 边 框 ， 从 而 与 普通 
按钮 有 所 区 别 。 


jQuery Mobile 1.0 中 可 用 的 图 标 见 表 3-1。 





























可 以 在 一 张 图 片上 提供 自 定义 的 图 标 集 ， 再 通过 CSS Sprites 技术 使 用 ， 就 
像 jQuery Mobile 框架 中 所 用 的 图 片 一 样 。 
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控制 行 的 重要 程度 
如 果 想 让 某 些 行 或 所 有 行 显得 比 普通 行 更 重要 ， 可 将 对 应 行 的 标题 包含 在 hx 标签 
中 ， 如 h2 E na, 这样 这 些 行 的 行 高 将 会 增加 一 些 。 




















如 果 想 让 某 些 行 显得 不 那么 重要 (比如 那些 不 常用 的 操作 ) ， 可 以 将 对 应 行 的 标题 包 
SE p 标签 中 ， 这 样 这 些 行 的 行 高 将 会 减少 一 些 。 


在 后 面 的 章节 我 们 将 看 到 如 何 更 精确 地 定制 列表 视图 以 及 行 。 








4.3.3 有 序 交 互 列表 
本 章 前 面 曾 提 到 可 以 使 用 ol 代替 ul 来 定义 列表 视图 。 我 们 已 经 知道 ， 在 只 读 列 表 
上 使 用 ol 和 ul 的 泻 染 效果 是 一 样 的 ， 不 过 如 果 列 表 中 使 用 的 是 交互 行 时 就 不 一 样 了 。 


首先 ， 一 个 重要 的 前 提 是 这 个 列表 中 的 所 有 行 都 必须 是 交互 行 ， 然 后 就 可 以 使 用 o1 
了 ， 这 时 各 个 链接 会 自动 被 编号 ， 如 图 4-11 所 示 。 


1. The Mobile Jungle 























2. Mobile Browsing 
3. Architecture and Design 
4. Setting up your environm... 


5. Markups and Standards 


oo0000009 


6. Coding Markup 


© 


7. CSS for Mobile Browsers 











图 4-11: 使 用 ol 定义 内 容 为 交互 行 的 列表 视图 ， 会 得 到 如 图 所 示 的 有 序 UI 


4.4 ARK 


每 一 行 都 可 以 用 指定 的 图 片 来 标识 ， 并 且 可 以 添加 两 种 不 同 的 图 片 : 图 标 和 缩 略 图 。 
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4.4.1 行 图 标 
行 图 标 是 显示 在 行 标题 左 侧 的 图 片 。 不 要 把 行 图 标 与 交互 行 右边 的 箭头 或 分 割 行 的 
图 标 搞 混 了 。 


图 标 是 一 个 位 于 对 应 1i 元 素 中 的 16 x 16 像素 的 图 片 ， 由 ui-1i-icon 类 定义 。 例 如 : 











«li» 
«img src-"/icons/email.png" class-"ul-li-icon"» 
Send by e-mail 


图 标 通常 用 于 各 种 操作 列表 ， 例 如 对 某 条 记录 可 以 做 的 各 种 操作 的 列表 COMER. S 
辑 、 通 过 电子 邮件 共享 、 通 过 社交 网 络 共享 等 ) 。 


4.4.2 ARE 


缩 略 图 是 一 个 80x 80 像素 的 图 片 ， 也 位 于 文本 左 侧 。 在 显示 照片 、 图 片 或 其 他 区 
信息 时 ， 推 荐 每 行 都 使 用 缩 略 图 。 


缩 略 图 通常 用 于 显示 数据 库 记 录 列 表 ， 如 朋友 、 图 书 、DVD、 城 市 等 。 
缩 略 图 由 列表 项 中 的 图 片 定义 ， 不 需要 任何 特殊 的 类 : 








p 
SR 


























«li» 
«img src-"/thumb/washington.png"» 
George Washington 


在 图 4-12 中 ， 可 以 看 到 两 个 插入 列表 中 的 图 标 及 缩 略 图 的 例子 。 


Share by 














Twitter 

@ 
Facebook 

@ 
Google+ 

@ 











图 4-12: 一 图 胜 千言 ， 所 以 我 们 为 列表 的 每 行 都 加 了 图 标 和 缩 略 图 
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4.5 附加 内 容 


到 目前 为 止 ， 我 们 设计 的 每 个 列表 都 具有 一 列 文本 内 容 。 虽 然 可 以 添加 缩 略 图 或 图 
标 ， 但 文本 列 只 有 一 列 。 我 们 可 以 为 每 一 行 加 一 个 次 级 列 ， 用 于 显示 补充 信息 。 


这 个 功能 可 以 使 用 任何 带 有 ui-1i-aside 类 的 HTML 元 素来 实现 ， 比 如 span 或 
div 元 素 。 


下 面 的 例子 在 附加 内 容 中 显示 了 价格 (如 图 4-13 所 示 ) : 














<!DOCTYPE html» 
<html> 


<head> 
«1-- 这 儿 放 置 典 型 的 jQuery Mobile 头 部 --> 

















«/head» 
«body» 


«div data-role-"header"- 
«hl»Order online-/h1» 
</div> 


<div data-role="content"> 
«ul data-role="listview"> 
<li><a href="buy.html">Soda</a> 
<span class="ui-li-aside">$1.00</span> 
<li><a href-"buy.html"»Sandwich«/a» 
<span class="ui-li-aside">$3.20</span> 
<li><a href="buy.html">Ice cream</a> 
<span class="ui-li-aside">$1.50</span> 
</ul> 
</div> 


</div> 


</body> 
</html> 





Order online 


Soda $1.00 o 
Sandwich $3.20 © 
Ice cream $1.50 © 














4-13: 使 用 附加 内 容 可 以 在 不 使 用 新 页 面 的 情况 下 在 一 列 中 显示 更 多 信息 
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4.6 标题 与 描述 
如 果 想 同时 在 一 行 上 显示 标题 与 描述 ， 可 以 将 标题 放 在 nx 标签 里 ， 将 描述 文本 放 
在 p 元 素 里 。 它 们 不 会 被 演 染 为 男 外 一 行 ， 效 果 如 图 4-14 所 示 。 


当然 ， 也 可 以 将 标题 、 描 述 和 附加 内 容 混 合 使 用 ， 还 能 同时 为 那 一 行 加 上 图 标 或 缩 
KEL 















































Order online 





Soda o 


Choose your favorite soda 


Sandwich [5] 
Ham & Cheese, Ham & Egg or Tuna 


Ice cream Not available 


© 


Chocolate, Vanilla or Strawberry 











图 4-14: 如 果 想 在 标题 旁边 显示 一 段 较 长 的 内 容 ,， 最 好 的 解决 方案 是 使 用 标题 和 拉 述 来 显示 ， 
而 不 是 使 用 附加 内 容 

LL 3x 4m 
4.7 使 用 计数 气泡 


计数 气泡 是 一 个 显示 在 行 右 侧 的 包含 数字 的 圆圈 ， 通 常用 于 显示 该 交互 行 包含 多 少 
项 ， 是 一 种 非常 简单 的 显示 未 读 元 素 、 未 完成 任务 和 任何 其 他 数字 信息 的 方式 。 





















































数 气泡 的 可 用 空间 是 专 为 数字 值 优 化 过 的 。 对 于 文本 值 ， 可 以 使 用 附加 内 


容 或 描述 显示 。 














计数 气泡 并 没有 被 限制 为 只 能 使 用 数字 值 ， 不 过 不 建议 使 用 文本 ， 因 为 计 
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要 使 用 计数 气泡 ， 只 需 在 列表 行 中 使 用 任意 带 ui-li-count 属性 的 元 素 ， 如 span 
标签 ， 一 切 就 完成 了 。 例 如 : 


<li><a href="inbox.html">Inbox</a> 
«span class="ui-li-count">86</span> 


图 4-15 显示 了 计数 气泡 在 一 个 交互 列表 中 的 谊 染 效 果 。 如 果 想 改变 默认 的 白色 背 
景 ， 可 以 修改 对 应 ul 元 素 上 的 data-count -theme 属性 来 指定 计数 气泡 的 色 样 。 








Your mail account 


Inbox © 
Important a0 © 
Starred e) © 


Draft o 


Sent © 














图 4-15; 带 计数 气泡 的 交互 列表 


4.8 ”使 用 搜索 过 滤 数 据 

最 后 来 看 看 最 精彩 的 部 分 。 先 把 本 书 放下 ， 如 果 你 正在 阅读 本 书 的 数字 版 ， 放 下 阅 
读 器 或 离开 浏览 器 ， 然 后 去 看 一 看 任何 一 个 跟着 本 章 完 成 的 列表 视图 的 示例 。 
找到 对 应 的 ul 或 ol 元素 ,添加 一 个 data-filter="true" 属性 ， 测 试 一 下 ， 然 
后 回 到 这 儿 继 续 阅 读 。 


jQuery Mobile 的 魔法 发 生 了 。 加 了 这 个 简单 的 属性 之 后 ，( 整 页 或 插入 ) 列表 顶部 
自动 被 加 上 了 一 个 搜索 框 ， 并 且 这 个 搜索 框 真 的 能 工作 ! 
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这 个 特性 会 根据 用 户 的 输入 过 滤 列 表 元 素 。 搜 索 文本 框 看 起 来 非常 漂亮 (如 图 4-16 所 
示 )， 左 侧 带 有 一 个 搜索 图 标 、 一 个 水 印 提示 文本 ， 圆 角 ， 右 侧 还 有 一 个 清晰 的 按钮 。 


Your mail account Your mail account 


(a Filter results... 




















Inbox 3) © Important 1) © 
Important 1) © 

Starred 2) © 

Draft © 

Sont «e| RA[s]p]r]e]u]»]k]-. 


zxcv e)n mi 


图 4-16: 搜索 过 滤器 是 一 个 神奇 的 特性 ， 无 需 编写 代码 即 可 为 列表 添加 过 滤 系 统 


再 说 一 次 ， 要 让 这 一 切 工作 ， 只 需 使 用 下 面 的 代码 。 现 在 请 到 本 书 的 网 站 上 获取 对 
应 的 源码 并 复制 粘贴 一 一 如 果 你 都 懒 到 了 连 自己 输入 以 下 代码 都 觉得 麻烦 的 地 步 : 














«ul data-role-"listview" data-filter-"true"- 
3 列表 行 eS 
«/ul» 


可 以 使 用 aata-filter-placeholder 属性 来 自 定义 占 位 文本 ， 如 : 


«ul data-role-"listview" data-filter-"true"  data-filter-placeholder- 
"Search contacts..."» 


«1-- 列表 行 --> 
«/ul» 


如 果 想 自 定义 搜索 栏 的 色 样 ， 则 可 以 使 用 data-filter-theme 属性 。 


4.9 列表 视图 速 查 表 


前 面 儿 页 中 我 们 已 经 介绍 了 列表 视图 的 许多 特性 。 图 4-17 是 一 个 速 查 表 ， 可 用 于 帮 
助理 解 如 何 使 用 HTML 标签 来 演 染 列表 视图 。 
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| Item Full-page list view 


| Item «ul data-rolez"listview"» 








Item 





Item Inset list view 





Item «ul data-rolez"listview" data-inset-"true"» 





Item 














Q Filter results... abc (X)| Filtered list view 

(full-page or inset) 
Item «ul data-role-"listview" data-filterz"true"» 
Item 





Simple row «li»Item 





Interactive row  «li»«a href="">Title</a> (list view must be ol) 





Numeric row <li><a href=”“>Title</a> 


Separator Title Separator row <li data-role-"list-divider"» 





Action #1 Splitted row <li><a href="">Action #1</a> «a href="">Action #2</a> 








Item Important row <li><hX>Item</hX> 





Item Less importantrow <li><p>Item</p> 





Thumbnail row <li><img src="imageURL">Item 





Title Aside row <li>Item<span class="ui-li-aside">aside</span> 
(can be interactive) 





Title Count bubble row <li>Item<span class="ui-li-count">count</span> 
(can be interactive) 





Title 


Description 


Description row <li><hX>Title</hX> <p>Description</p> 

















4-17: 列表 视图 特 


-5 





第 5 章 





表单 组 件 


jQuery Mobile 框架 支持 标准 网 页 表单 ， 在 支持 的 设备 上 会 自动 使 用 AJAX 处 理 ， 同 
时 标准 表单 控件 的 外 观 也 为 触摸 操作 做 了 优化 。 这 是 关于 表单 控件 的 第 一 个 好 消息 。 
上 面 所 说 的 标准 网 页 表单 ， 指 的 是 位 于 form 元 素 内 的 一 组 表单 控件 ， 如 input, 


textarea 以 及 select 元 素 等 ， 表 单 的 数据 将 被 发 送 到 该 form 元 素 的 action 属 
性 所 指向 的 URL. 


5.1 表单 动作 


所 有 表单 action 的 处 理 方式 都 与 原来 一 样 。 也 就 是 说 ， 当 用 户 按 下 提交 按钮 或 回 
车 键 时 ， 表 单 会 被 提交 。 我 刚刚 说 了 移动 设备 上 的 回 车 键 了 吗 ? 

我 们 的 目标 是 兼容 各 种 设备 以 及 各 种 输入 方式 ， 其 中 一 些 有 物理 键盘 〈 可 能 带 回 车 
键 )， 一些 只 有 一 个 虚拟 的 屏幕 键盘 。 那 些 设备 的 虚拟 键盘 上 通常 会 有 一 个 “发 送 ”、 
“提交 ”之 类 的 按钮 ， 用 于 提交 表单 。 

表单 提交 时 ， 除 非 是 提交 到 不 同 的 域名 ， 不 然 jQuery Mobile 会 使 用 AJAX 方式 过 
渡 到 目标 页 面 ， 就 像 连接 到 一 个 外 部 页 面 一 样 。 表 单 form 元 素 的 method 属性 可 以 
是 get， 也 可 以 是 post。 


典型 的 jQuery Mobile 表单 与 典型 的 网 页 表单 很 像 : 
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«form action-"send.php" action-"get"- 


«/form» 


jQuery Mobile 表单 要 求 结果 页 面 也 是 一 个 jQuery Mobile 文档 ， 就 像 外 部 页 面 一 样 。 
这 是 因为 默认 情况 下 ，jQuery Mobile 会 尝试 通过 框架 中 的 AJAX 发 送 表 单 。 





如 果 想 将 结果 页 面 添 加 到 浏览 器 历史 记录 中 ， 可 以 使 用 get 方法 并 修改 页 面 地 址 的 
散 列 值 。 


第 二 章 中 讲 到 的 aata-transition 和 data-direction 属性 也 可 以 应 用 到 form 
元 素 上 。 因 此 ， 可 以 定义 一 个 弹出 式 过 小 的 表单 提交 行为 : 





«form action-"send.php" action-"get" data-transition-"pop"-» 


«/form» 


强制 表单 禁用 AJAX 

如 果 想 强制 使 用 标准 HTTP 请 求 而 不 是 AJAX， 可 以 在 form 元 素 上 使 用 data- 
ajax-"false" 属性 。 在 表单 action 指向 不 同 域 的 主机 或 在 上 传 文件 时 (后 面 会 
详细 介绍 )， 这 个 属性 设置 尤其 有 用 。 





也 可 以 在 form 元 素 上 使 用 target=" blank" 来 强制 使 用 非 AJAX 方式 提交 。 

















可 以 在 表单 域 上 定义 一 个 布尔 值 的 属性 autofocus， 以 便 控 制 该 表单 域 在 
EM 页 面 加 载 后 是 否 自动 获得 焦点 。 不 过 在 jQuery Mobile 文档 中 ， 这 个 属性 
只 会 在 第 一 个 页 面 上 生效 ， 之 后 使 用 jQuery Mobile 过 渡 新 加 载 的 页 面 都 
没有 效果 。 


52 ”表单 元 素 


jQuery Mobile 允许 在 一 个 表单 中 同时 使 用 标准 网 页 表单 控件 和 新 的 富 控 件 。jQuery 
Mobile 框架 有 一 个 称 为 “自动 初始 化 ”(auto-initialization) 的 特性 ， 可 以 将 各 个 网 
页 表单 控件 替换 为 对 触摸 操作 更 为 友好 的 富 控 件 。 


jQuery Mobile 也 让 HTMLS 中 新 增 的 表单 域 类 型 达到 了 一 个 新 的 层次 ， 甚 至 在 不 支 
持 这 些 新 表单 域 的 浏览 器 上 也 可 以 使 用 它们 。 


下 列 元 素 会 被 泻 染 为 富 控 件 : 
。 按钮 ， 使 用 button 或 input 元 素 ; 



































108 | 第 5 章 


。 文本 输入 域 ， 使 用 input 或 textarea 元 素 ; 

。 复 选 和 单 选 按钮 ， 使 用 input 7635; 

。 菜单 ， 使 用 select 及 option 元 素 ; 

。 H, [JH input type-"range" 的 新 控件 ; 

。 滑 块 开关 ， 使 用 带 新 role 属性 的 select 和 option 元 素 。 


如 果 想 强制 禁止 jQuery Mobile 使 用 富 UI 组 件 来 泻 染 表单 控件 ， 只 需 在 各 个 表单 元 
素 上 加 上 data-role-"none" 属性 。 

每 个 表单 元 素 都 会 独占 一 行 ， 对 移动 设备 上 的 表单 来 说 ， 这 是 用 户 体验 最 好 的 方式 。 
当然 ， 也 可 以 强制 使 用 多 列 ， 不 过 不 建议 这 么 设计 用 于 移动 设备 的 表单 。 

















使 用 AJAX 时 ， 包 括 网 页 表单 控件 在 内 的 整个 页 面 都 共享 同一 个 DOM， 
ED 办 此 我 们 需要 保证 各 个 form 元 素 的 ID 在 整个 站 点 中 唯一 。 如 果 有 两 个 表 
单 ， 也 不 要 在 相似 的 表单 控件 上 使 用 相同 的 ID。 






































5.2.1 文本 标签 
每 个 表单 控件 都 有 一 个 很 重要 的 文本 标签 元 素 。 应 该 总 是 为 每 个 控件 包含 一 个 对 应 
的 label 元 素 ， 并 将 控件 的 for 属性 指向 该 1abel。 来 看 一 个 例子 : 


«label for="company">Company Name:«/label» 

«input type="text" id-"company"» 
关于 label 需要 了 解 的 最 重要 的 一 点 是 用 户 点 击 1abel 时 ， 对 应 的 表单 控件 会 得 
到 焦点 ， 用 户 可 以 马上 使 用 该 控件 。 因 此 ， 表 单元 素 可 点 击 的 区 域 为 控件 自身 加 上 
label 标签 ， 对 触摸 设备 来 说 这 是 不 错 的 体验 。 








Aa 明确 地 考虑 一 下 可 访问 性 问题 。 这 也 是 为 什么 总 是 应 该 包含 一 个 label, 
如 果 想 隐藏 它 ， 可 以 在 它 或 任何 其 他 HTML 元 素 上 应 用 类 ui-hidden- 


accessible, 





1 如 果 出 于 某 种 原因 ， 需 要 创建 一 个 不 带 label 的 表单 元 素 时 ， 你 仍然 要 
as 
t 

4 























5.2.2. ARE 
域 容器 是 一 个 可 选 的 文本 标签 /部 件 包 装 器 ， 用 于 提高 在 平板 电脑 等 宽屏 幕 设 备 上 
的 体验 。 容 器 可 以 是 任意 带 data-role-"fieldcontainer" 的 块 级 元 素 。 


容器 会 将 内 部 的 文本 标签 和 表单 控件 自动 对 齐 ， 并 会 添加 一 个 细 边 框 作 为 字段 分 隔 
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gu 


Tür 


的 第 二 个 重要 特性 是 它 会 根据 设备 的 宽度 自动 调整 布局 。 也 就 是 说 ， 如 果 

















BARRE RE, GrH HER ACC ZERO EI, ENIRO TBUAE ERR LAUS, 
文本 标签 位 于 左 列 ， 如 图 5-1 所 示 。 








Name: 


Registration 





Name: 





Email: 





Email: 


Submit 








Submit 








图 5-1: 基于 广为人知 的 移动 设计 模式 ， 文 本 标签 的 位 置 在 智能 手机 和 平板 电脑 上 有 所 不 同 
每 个 文本 标签 /控件 都 可 以 添加 域 容器 ， 如 下 例 所 示 : 





<div data-role="fieldcontainer"> 
«label for="company">Company Name:</label> 
«input type="text" id-"company" name="company"> 


</div> 


<div data-role="fieldcontainer"> 
«label for="email">Email:</label> 
<input type="email" id="email" name="email"> 


</div> 


5.2.3 文本 输入 框 


jQuery Mobile 支持 基本 的 HTML5 文本 输入 控件 ， 并 能 根据 当前 主题 和 色 样 进 
染 。 下 面 是 可 用 的 文本 输入 框 。 


* «input 
* «inpu 
* «inpu 
* «input 
e «input 
e <inpu 








type="text"> 
type="password" > 
type="email"> 
type-"tel"- 
type="url"> 


type="search"> 





e <input type-"number"- 


e <textarea> 


使 用 上 面 的 元 素 时 会 自动 得 到 一 个 jQuery Mobile 控件 。 记 住 不 需要 显 式 指定 任何 
data-role 属性 。 

wá type JJ button, submit, clear E image 的 input 元 素 会 被 自动 浑 染 

为 jQuery Mobile 按钮 。 





as, 
QN 





MN 
(SA 


如 果 你 正在 想 “ 我 只 知道 text fll password 两 种 输入 类 型 ”的 话 ， 不 要 担心 。 
email, tel, url, search 以 及 number 是 HTMLS 标准 中 的 新 输入 类 型 ， 在 移动 
互联 网 领域 非常 重要 。 你 知道 ， 大 多 数 触摸 设备 没有 物理 键盘 ， 指 定 一 种 新 输入 类 
型 时 ， 我 们 将 得 到 一 个 优化 过 的 虚拟 键盘 ， 如 图 5-2 所 示 。 








Carrier ^ 9:00 PM Em Carrier 全 8:59 PM Emp Carrier © 8:59 PM =æ 
Email: Phone Number: Age: 


Phone Number: 








Next Done 
ia|w|e|R| v] v|v[1]o]P| 
i[s|p]r]e]n] lk]. 


iz Ix|c|v[e|N] vi 
二 0 | o | - ES 














图 5-2: 在 一 些 设备 上 ， 使 用 新 的 HTML5 输入 类 型 会 得 到 不 同 的 虚拟 键盘 


Aa 





不 要 担心 那些 不 支持 HTMLS 新 输入 类 型 的 老 设备 ， 遇 到 不 认识 的 type 属 
Wa. 性 时 ， 每 个 浏览 器 都 会 将 它 降级 为 基本 的 文本 输入 域 。 


Mu 











与 典型 的 text 类 型 相 比 ，search 类 型 的 输入 域 有 两 个 不 同 : TE jQuery Mobile 中 
它 的 用 户 界面 与 其 他 输入 域 不 同 ， 在 某 些 设备 的 虚拟 键盘 上 它 提供 了 一 个 不 同 的 
“返回 ” 键 。 如 图 5-3 所 示 : 








«div data-role-"fieldcontainer"- 

«label for-"search'"»Search:«/label» 

«input type-"search" id-"search" name-"search"- 
«/div» 
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Search: 


5-3; 在 jQuery Mobile 文档 中 ，search 输入 域 的 外 观 有 所 不 同 


5.2.4 自 增 长 文本 区 

使 用 textarea 来 处 理 多 行文 本 输入 时 ， 有 一 个 额外 的 特性 : 自动 增长 。jQuery 
Mobile 会 以 一 个 两 行 高 的 区 域 开 始 ， 随 着 输入 文本 的 增加 而 变 高 。 之 后 ， 框 架 会 
动 扩 展 该 文本 区 域 以 适合 新 行 。 这 将 允许 我 们 在 textarea 中 滚动 ， 而 这 个 操作 在 
大 多 数 移动 浏览 器 上 都 是 非常 痛苦 的 。 











«div data-role-"fieldcontainer"» 

«label for-"comments"»Your comments:«/label-» 
«textarea id-"comments" name-"comments»«/textarea» 
«/div» 


图 5-4 显示 了 自 增长 文本 区 域 的 实例 。 











“Carrier. 会 9:03 PI IL Carrier kl : | 


Comments: 


Hello, my name is Maximiliano 
Firtman, but you can call me Max. My 
twitter account is @firt and my blog is 
www.mobilexweb.co: 














5-4, 当 文 本 行 数 超出 可 见 区 域 时 ，jQuery Mobile 会 自动 扩展 文本 区 域 








安全 还 是 不 安全 

在 移动 设备 上 使 用 密码 文本 框 (<input type="password" />) 是 一 个 有 争 
议 的 话题 。 密 码 文本 框 (使 用 经 典 的 星 号 或 圆 点 代替 用 户 输入 的 字符 ) 的 初衷 是 
训 免 站 在 用 户 背 后 或 能 看 到 用 户 屏 幕 的 人 窃取 用 户 的 密码 。 在 移动 电话 领域 ， 这 
个 情况 发 生 了 变化 。 由 于 屏幕 及 字体 的 尺寸 都 很 小 ， 因 此 其 他 人 很 难看 见 用 户 在 
自己 的 移动 电话 上 输入 的 内 容 。 进 一 步 ， 在 非 QWERTY 键 盘 的 设备 上 打字 是 比 
较 困 难 的 ， 如 果 用 星 号 来 代替 真实 的 输入 字符 ， 用 户 可 能 无 法 确定 自己 的 输入 是 
TEH (虽然 在 有 些 设备 上 ， 输 入 的 字符 会 先 显 示 一 秒 再 变 成 星 号 ) 。 如 果 仍 然 
想 使 用 密码 输入 框 ， 建 议 强 制 将 文本 输入 框 改 变 为 数字 输入 框 。 互 联网 可 用 性 
专家 Jakob Nielsen (http://useit.com) 就 同意 这 一 点 。 在 2009 年 Alertbox 专 栏 上 ， 
Nielsen 写 道 : “用 户 输 入 密码 时 ， 唯 一 的 反馈 是 看 到 一 行 圆 点 ， 可 用 性 实在 是 
太 粳 糕 了 。 一 般 情 况 下 ， 讶 住 密码 不 会 提高 安全 性 ， 只 会 由 于 登录 失败 而 增加 成 
本 。”Facebook 移 动 版 部 署 了 这 样 一 个 特性 ， 如 果 输 错 了 一 次 密码 ， 下 次 输入 时 密 
码 输 入 框 的 内 容 就 将 是 可 见 的 ， 同 时 还 有 一 个 说 明 告 诉 用 户 密码 虽然 可 见 ， 但 它 仍 
然 是 安全 的 。 另 一 个 解决 方案 是 使 用 普通 文本 框 来 输入 密码 ， 同 时 再 加 一 个 文本 标 
签 为 “隐藏 密码 ”的 复 选 框 ， 选 中 时 就 将 密码 输入 框 的 类 型 更 改 为 password。 











5.2.5 新 HTML5 属 性 


在 文本 输入 框 上 使 用 任何 HTMLS 属性 都 是 安全 的 ， 在 支持 的 设备 上 这 些 属性 将 起 
作用 ， 老 设备 上 则 将 什么 也 不 做 。 在 新 的 表单 控件 属性 里 ， 我 们 会 提 到 required. 
pattern, placeholder 以 及 min 和 max ( 仅 用 于 «input type="number">)。 


因此 ， 如 果 一 个 输入 域 是 必需 的 ， 则 可 以 使 用 布尔 属性 required 来 标识 它 。 还 可 
以 定义 一 段 占 位 文本 ， 当 输入 控件 中 没有 值 时 ， 它 将 显示 为 灰色 的 提示 。 


<div data-role="fieldcontainer"> 

«label for="name">Your Name:</label> 

«input type="text" id-"name" required placeholder-"Enter your name"- 
</div> 


<div data-role="fieldcontainer"> 

<label for="age">Your Age:</label> 

<input type="number" id="age" required placeholder="Enter your age" min= 
"10" max="110"> 

</div> 


使 用 CSS3 WHR, 7558 JavaScript 校 验 代码 即 可 为 有 效 、 无 效 、 必 
填 以 及 选 填 的 文本 输入 框 创建 不 同 的 样式 。 
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5.2.6 日 期 输入 框 


E HTML 中 输入 日 期 一 直 是 一 个 问题 ,过 去 一 般 需 要 依赖 于 JavaScript 库 来 用 
HTML 创建 一 个 虚拟 的 日 历 。HTML5 中 已 加 入 了 对 日 期 输入 框 的 支持 ， 只 需要 使 
用 下 列 类 型 的 input 元 素 : 


。 date 用 于 日 期 选择 (Œ. H. H); 

* datetime 用 于 完整 的 日 期 选择 〈 年 、 月、 日 、 小 时 、 分 钟 )， 使 用 标准 的 包括 
GMT 时 区 的 语法 ， 

。 time 用 于 时 间 选 择 (小 时 、 分 钟 ) ; 

e datetime-local 用 于 完整 的 日 期 选择 ， 不 带 时 区 信息 ， 

。 month 用 于 月 份 选 择 (一 般 泻 染 为 一 个 下 拉 列 表 ) : 

。 week 用 于 选择 指定 年 份 的 星期 (一般 泻 染 为 一 个 下 拉 列 表 )。 


日 期 输入 类 型 是 新 添加 的 ， 不 是 所 有 的 移动 或 桌面 浏览 器 都 支持 。 在 写作 本 书 的 
时 候 ， 大 多 数 日 期 输入 类 型 在 OS 5.0 版 (以 及 之 后 的 版 本 ) 中 的 Safari 上 都 能 工 
作 ， 同 时 支持 的 还 有 用 于 PlayBook 和 智能 手机 的 BlackBerry 浏览 器 5.0 及 更 新 版 、 
Opera 移动 版 ， 以 及 Firefox Android 版 。 可 以 在 http://mobilehtml5.org 上 查看 这 个 
兼容 的 更 新 情况 。 

















即使 没有 显 式 地 指定 aata-role， 还 是 要 记 住 输入 框 控件 是 被 演 染 为 
Qa. jQuery Mobile 控件 的 。 因 此 ， 用 于 指定 色 样 的 aata-theme 等 全 局 属性 对 
U^ 这 些 控件 也 有 效果 。 














出 


记 住 ， 在 不 支持 的 浏览 器 上 ，input 元 素 会 自动 降级 为 普通 的 文本 输入 框 : 





«div data-role-"fieldcontainer"» 
«label for-"birth"»Your Birthdate:«/label» 
«input type-"date" id-"birth" name-"birth"-» 


«label for-"favmonth"»Your favorite month:«/label» 

«input type-"month" id-"favmonth" name-"favmonth"- 

«/div» 
日 期 输入 框 支持 min fH max 属性 。 在 图 5-5 中 可 以 看 到 日 期 输入 框 在 一 些 智 能 手机 
和 平板 电脑 上 的 浑 染 效果 。 











, Carier 会 — 906PM Œœ 








Registration 





| Feb 23, 1970 | 





Your Birthdate: Your favorite month: 


Feb 23, 1970 June 2012 


Your favorite month: 


| June 2012 | 








Clear Done Previous Clear Done 


January |22 | 1969 


May 2011 








y [as 


aon [2a arr 














图 5-5: iOS 从 第 5 版 开始 支持 日 期 元 素 ， 因 此 ， 使 用 日 期 HTML 输入 框 类 型 可 以 得 到 更 好 
的 日 期 选择 器 


5.2.7 H 

滑 块 用 于 输入 处 于 某 个 范围 的 数字 值 。 使 用 时 ， 它 会 提供 一 个 接受 数字 的 文本 输入 
框 ， 右 侧 还 会 有 一 个 水 平滑 块 ， 如 图 5-6 所 示 。 要 使 用 滑 块 ， 必 须 定义 一 个 HIMLS 
«input type-"range'» 控件 ， 它 接受 min, max 以 及 step 值 : 





«div data-role-"fieldcontainer"- 

«label for-"qty"»Quantity:«/label» 

«input type-"range" id-"qgty" name-"qty" min-"1" max-"100" value="5"> 
</div> 


滑 块 支持 通过 aata-theme 定义 色 样 ， 但 只 对 数字 输入 框 有 效 ， 也 可 以 定义 一 个 
data-track-theme 属性 ， 后 者 只 影响 请 动 条 ， 如 图 5-6 所 示 : 





«div data-role="fieldcontainer"> 

«label for="qty">Quantity:</label> 

«input type-"range" id-"gty" name-"qty" min-"1" max="100" value="5" data- 
theme-"e'" data-track-theme-"b's 

«/div» 
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Quantity: 


(5 o 


Quantity: 
图 5-6; fr jQuery Mobile 中 ， 范 围 输入 类 型 将 在 标准 HTML5 泻 染 的 基础 上 被 泻 染 为 一 个 只 
能 输入 数字 的 小 输入 框 和 一 个 同步 的 水 平滑 块 


如 果 设 备 支 持 ， 请 块 控件 也 能 响应 键盘 事件 。 因 此 ， 当 控件 获得 焦点 时 ， 用 户 可 以 
使 用 方向 键 、 滚 轮 ， 或 操纵 杆 来 增加 或 减少 控件 的 值 。 











5.2.8 平移 切换 开关 


平移 切换 开关 是 一 个 布尔 值 (true 或 false, on :X off) 选择 器 ， 功 能 上 与 复 选 
框 类 似 ， 但 用 户 界 面 完 全 不 同 。 它 被 泻 染 为 一 个 可 视 化 的 开关 ， 用 户 可 以 打开 或 关 
BH] (在 开关 上 点 击 或 拖 动 )。 


这 是 第 一 个 需要 显 式 指定 data-role 的 表单 控件 ， 对 应 的 data-role 值 为 
slider。 它 需要 一 个 select 元 素 ， 其 中 只 包含 两 个 option 作为 子 元 素 ， 第 一 个 
为 off/false 值 ， 第 二 个 是 on/true f: 


«label for="updated">Receive updates«/label- 
«select id-"updated" name-"updated" data-role-"slider"- 
«option value-"no"»No«/option» 
«option value="yes">Yes</option> 
«/select» 


不 指定 域 容器 的 话 ， 平 移 切换 开关 将 被 演 染 为 整 页 宽度 。 更 常见 的 情况 是 将 相应 的 
内 容 放 在 域 容器 里 ， 如 图 5-7 所 示 。 





Receive updates 





| No 
Receive updates 














Receive updates 


u— ici `) 
A 














图 5-7: 使 用 域 容器 时 ， 平 移 切换 开关 的 宽度 会 不 一 样 
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HTMLS 拾 色 器 控件 <input type="color"> 在 大 多 数 移动 浏览 器 上 都 不 
MSS 能 工作 ， 泻 染 效果 和 任何 其 他 文本 输入 控件 一 样 。 




















5.2.9 选择 菜单 

select 元 素 创 建 的 菜单 是 一 个 典型 的 表单 控件 ， 用 于 从 一 个 弹出 列表 中 选择 一 个 
或 多 个 选项 。 所 有 移动 浏览 器 都 支持 select ( 单 选 或 多 选 )。jQuery Mobile 将 选择 
菜单 的 外 观 改变 为 按钮 样式 的 风格 ， 并 在 被 点 击 时 调用 原生 的 菜单 ， 如 图 5-8 所 示 。 











‘Carrier 会 9:17 PM - EP Carier 全 9:17 PM - = 





Select menu 





Training Training 





HTML5 o | HTML5 © | 
Vam 





V HTML5 


jQuery Mobile 

















图 5-8: select 菜单 会 被 自动 转换 为 像 按钮 一 样 的 控件 ， 并 带 有 一 个 提示 用 户 可 以 打开 选项 
菜单 的 图 标 


默认 情况 下 ，select 菜单 会 占用 整个 宽度 ， 除 非 将 它 包 含 在 一 个 域 容器 里 : 


«label for="training">Training</label> 
«select id="training" name="training"> 
<option value="1">HTML5</option> 
«option value="2">jQuery Mobile</option> 
«option value="3">i0S</option> 
<option value="4">Android</option> 
<option value="5">BlackBerry</option> 
<option value="6">Qt for Meego</option> 
</select> 


fH multiple 布尔 属性 后 ，jQuery Mobile 及 原生 控件 都 将 提供 另 一 种 用 于 多 选 的 
用 户 界面 ， 如 图 5-9 所 示 : 
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«label for-"lang"»Languages you like«/label-» 
«select id-"lang" name-"lang" multiple» 
«option valuesz"1"2C/C«««/option» 
«option valuesz"2"20bjective-C«/option» 
«option value="3">Java</option> 
«option value="4">C#</option> 
«option value="5">Visual Basic«/option-» 
«option value-s"6"sActionScript«/option» 
«option valuesz"7"»Delphi«/option» 
«option value-z"8"sPhyton«/option» 
«option values"9"5JavaScript«/option» 
«option valuesz"10"-Ruby«c/option» 
«option value="11">PHP</option> 
«/select» 
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Multiple selection 


Languages you like 


Objective-C, Java, C# (3) © 


V Java 


V Ci 


Visual Basic 














55-9: FASERA, RIZ RBRIES/DRIEX DIU DM — T Sim EX» 
元 素 的 计数 气泡 


和 其 他 表单 元 素 一 样 ， 也 可 以 使 用 aata-theme 来 改变 默认 的 色 样 ， 还 可 以 用 optgroup 
元 素 将 option 元 素 分 组 。 


























如 果 使 用 JavaScript 改变 表单 控件 的 值 ， 例 如 select 菜单 的 value 属性 ， 
Ta 或 单 选 、 复 选 杠 的 checkea 属性 ， 对 应 的 jQuery Mobile UI 不 会 自动 更 
新 ， 除 非 使 用 下 一 章 介 绍 的 jQuery Mobile API 剧 新 对 应 的 部 件 。 



































1. 组 合 选择 菜单 
select 菜单 可 以 使 用 controlgroup 元 素 进 行 垂 直 或 水 平 组 合 。 水 平 组 合 对 较 短 
只 需 将 它们 岁入 一 


的 选择 菜单 很 有 用 ， 例 如 一 组 年 /月 /日 的 选择 。 要 组 合 菜 单 ， 
个 带 data-role-"controlgroup" 的 div 中 ， 如 下 例 所 示 ， 效 果 见 图 5-10: 


«div data-role="controlgroup" > 
<legend>Color and Size</legend> 


<select 
<option 
<option 
«option 
«option 
«option 


«select 
«option 
«option 
«option 
«option 
«option 


</div> 


<div data-role="controlgroup" data-type="horizontal"> 


ids"color" 


name-"color"- 


value="1">Blue</option> 
value="2">White</option> 
value="3">Red</option> 
value="4">Black</option> 
value="5">Pink</option> 
</select> 
id="size" name="size"> 
value="1">X-Small</option> 
value="2">Small</option> 
value="3">Medium</option> 
value="4">Large</option> 
value="5">X-Large</option> 
</select> 


<legend>Week day and time</legend> 
id="weekday" name="weekday" multiple> 
value="1">Mon</option> 


<select 
<option 
<option 
<option 
<option 
<option 


<select 
<option 
<option 
<option 


</div> 


valuez"2"57 


lr'uec«/option» 


value="3">Wed</option> 


value="4">" 





rhu</option> 


value="5">Fri</option> 
</select> 
id="time" name="time"> 
value="1">Morning</option> 
value="2">Midday</option> 
value="3">Afternoon</option> 
</select> 





Blue 


X-Small 


Mon © Morning © 








5-10: 可 以 使 用 controlgroup 包装 将 选择 菜单 组 合 起 来 
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使 用 controlgroup 元 素 时 ， 单 独 的 文本 标签 (label) 会 被 隐藏 。 可 以 使 用 
legend 元 素来 定义 一 个 应 用 到 整个 分 组 的 文本 标签 ， 如 下 例 所 示 ， 效 果 见 图 5-11: 


«div data-role-"controlgroup" data-type-"horizontal"- 
«legend»Delivery options«/legend» 


«label for-"weekday"»Week day«/label-» 

«select id-"weekday" name-"weekday" multiple» 
«option value-z"1"2Mon«/option» 

«option value-"2"»Tue«c/option» 

«option value-"3"»Wed«/option» 

«option value-"4"sThu«/option» 

«option value-"5"sFric/option» 

«/select» 
«label for-"time"»Time«c/label» 
«select id-"time" name-"time"- 
«option value-"1"»Morning«-/option» 
«option value-"2"2Midday«-/option» 
«option value-"3"»Afternoon«/option» 
«/select» 

«/div» 








(Carrier © 9:21 PM 一 





Delivery options 


Mon © Morning ®© | 











Previous 


Midday 


V Afternoon 














5-11: 对 不 是 太 长 的 选择 菜单 来 说 ， 可 以 使 用 水 平 的 controlgroup 元 素 





| AD 
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2. 非 原 生 选 择 菜单 

在 图 5-10 中 我 们 已 经 看 到 ， 每 个 select 元 素 都 默认 被 演 染 为 一 个 jQuery Mobile 
语 控 件 。 不 过 在 被 打开 时 ， 它 仍然 依赖 于 移动 浏览 器 的 原生 select 元 素 。jQuery 
Mobile 也 为 选择 菜单 提供 了 另 一 个 用 户 界面 ， 可 用 于 覆盖 原生 行为 。 








要 激活 这 个 特性 ， 只 需 在 对 应 的 select 元 素 上 指定 data-native-menu-"false", 
如 图 5-12， 在 菜单 关闭 时 UI 看 起 来 没什么 不 同 ， 不 过 打开 时 就 能 看 到 差异 了 : 





«label for="training">Training</label> 
«select id-"training" name-"training" data-native-menu="false"> 
«option value-"1"sHTML5«/option» 
«option value-"2"»jQuery Mobile«c/option» 
«option valuesz"3"2iOS«/option» 
«option value="4">Android</option> 
«option valuesz"5"sBlackBerry«/option» 
«option value-"6"»Qt for Meego«/option» 














«/select» 
Carrier — 9:23PM__ BE Carrier — 9:24 PM = 
Select menu 
Training HTML5 
HTML5 o jQuery Mobile 

Android 
BlackBerry 
Qt for Meego 

<A 2: mMM Ð < 2? M B 











图 5-12: 使 用 非 原生 选择 菜单 时 ， 原 来 的 菜单 会 被 一 个 类 似 对 话 框 的 交互 列表 取代 


当 列 表 的 长 度 超过 屏幕 时 ， 选 择 菜 单 控件 的 外 观 会 发 生变 化 ， 它 将 使 用 一 个 类 似 对 
话 框 的 外 观 ， 如 图 5-13 所 示 。 
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Training 


jQuery Mobile 


iOS 

Android 
BlackBerry 
Qt for Meego 


Windows Phone 





Symbian 
< C li 














中 的 列表 分 割 行 。 








打开 非 原 生菜 单 时 当前 表单 会 被 盖 上 一 个 覆盖 层 ， 可 以 用 data-overlay-theme 来 
指定 这 个 和 覆盖 层 的 色 样 。 如 果 某 个 option 元 素 显 式 地 指定 了 空 值 (value="")， 
或 带 有 属性 data-placeholder-"true", 则 它 将 被 用 作 覆 盖 层 的 标题 ， 而 不 再 是 
一 个 可 选择 的 选项 ， 如 下 例 所 示 (参见 图 5-14) : 











«label for="training">Training</label> 
«select id-"training" name="training" data-native-menu="false" data- 
overlay-theme-"e"s 
«option value-"0" data-placeholder-"true"»Select your training«/option» 
«option value-"1"-sHTML5«/option» 
«option value-"2"»jQuery Mobile</option> 
«option value-"3"2iOS«/option» 
«option value-"4"»Android«/option» 
«option value-"5"-BlackBerry«/option» 
«option value-"6"»Qt for Meego«/option» 
«/select» 





ET. 
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Select your training 





HTML5 


jQuery Mobile 


ios 
Android 
BlackBerry 


Qt for Meego 








4 2: M uu 











B 5-14: 在 非 原生 选择 列表 中 ， 可 以 通过 占 位 符 来 指定 选择 对 话 的 标题 

如 图 5-15 所 示 ， 非 原生 菜单 也 支持 多 选 ， 只 需 指 定 布尔 值 属性 multiple 即 可 。 指 
定 了 multiple 时 ， 该 覆盖 层 对 话 将 带 一 个 关闭 按钮 ， 并 且 不 会 在 选择 了 一 项 之 后 
就 自动 关闭 。 





e Preferred languages 





C/C++ 
Objective-C 
Java 


C# 


Visual Basic 


ActionScript 








4 2: MM un 











B 5-15: 非 原生 多 选 菜单 的 用 户 界 面包 含 一 个 多 选 列 表 视 图 
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jQuery Mobile 也 会 正确 地 处 理 opcion 元 素 的 disabled 属性 。 




















要 让 非 原 生菜 单 正常 工作 ， 在 option 元 素 上 有 一 个 限制 ， 它 们 都 必须 显 
EM 式 地 指定 value 属性 。 如 果 一 个 option 的 value 被 指定 为 空 ， 那 么 它 将 
被 用 作 弹 出 窗口 的 标题 。 


























5.2.10 ” 单 选 按钮 

大 家 都 知道 单 选 按钮 是 什么 。 在 jQuery Mobile 中 ， 关 于 单 选 按钮 最 好 的 一 个 消 
息 是 ， 对 它们 的 泻 染 我 们 什么 也 不 需要 做 。 首 先 ， 让 我 们 看 一 下 要 让 单 选 按钮 在 
jQuery Mobile 中 正常 工作 需要 些 什么 条 件 : 


。 每 个 选项 必须 是 一 个 <input type="radio">; 
。 同一 组 的 每 个 选项 的 name 值 必须 相同 ，; 
。 每 个 选项 都 必须 有 一 个 唯一 的 ia 以 及 一 个 关联 的 唯一 的 1abel 元 素 。 


使 用 选择 菜单 和 单 选 按钮 的 一 个 很 大 的 不 同 是 ， 使 用 select 时 对 应 的 Label 是 
应 用 到 整个 元 素 上 ， 而 使 用 单 选 按钮 时 对 应 的 1abel 则 是 应 用 到 每 个 元 素 上 。 在 
图 5-16 中 我 们 可 以 看 到 ，1lapel 是 按钮 文本 的 一 部 分 ， 而 不 像 文本 输入 框 控件 的 
label 一 样 位 于 控件 之 外 。 











Menu type 


Native menu, single selection 
Native menu, multiple selection 
O Non-native menu, single selection 


Non-native menu, multiple selection 











5-16; 单 选 按钮 与 对 应 的 1abel 被 泻 染 在 同一 个 按钮 里 
也 可 以 使 用 HTML 元 素 legend 来 为 整个 选项 组 提供 一 个 文本 标签 。 


<legend>Menu type</legend> 


«label for="menuNativel">Native menu, single selection</label> 
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«input 


«label 
«input 


«label 
«input 


«label 
«input 


type="radio" id-"menuNativel" name-"menuType" value="1"> 


for-"menuNative2"»Native menu, multiple selection«/label-» 
type="radio" id-"menuNative2" name-"menuType" value="2"> 





for-"menuNonNativel"»Non-native menu, single selectionc-/label» 


type="radio" id-"menuNonNativel" name-"menu]l 


l'ype" value="3"> 


for-"menuNonNative2"»Non-native menu, multiple selection-/label» 


type="radio" id-"menuNonNative2" name-"menu]l 





lype" value="4"> 


如 果 将 每 个 radio 元 素 都 包含 在 controlgroup 容器 中 ， 用 户 界面 会 更 友好 一 些 ， 
如 图 5-17 所 示 : 





«div data-role="controlgroup"> 
«1-- 这 儿 放 置 label 和 radio 元 素 --> 


«/div» 





Menu type 


Native menu, single selection 


O Native menu, multiple selection 


Non-native menu, single selection 


Non-native menu, multiple selection 











图 5-17: 将 多 个 单 选 按钮 组 合 到 一 个 controlgroup 中 是 提供 清晰 的 用 户 界 面 的 最 佳 方法 





如 果 将 controlgroup 元 素 的 type 改 为 horizontal， 则 外 观 将 大 不 一 样 。 元 素 
将 不 再 是 典型 的 单 选 按钮 ， 而 会 变 成 开关 按钮 控件 ， 如 图 5-18 所 示 : 


«legend»Delivery method«/legend-» 


«div data-role-"controlgroup" data-type-"horizontal"» 


«label 
«input 


«label 
«input 


«label 
«input 


</div> 


for="deliveryUPS">UPS</label> 


type="radio" id="deliveryUPS" name-"delivery" value="ups"> 


for="deliveryDHL">DHL</label> 


type="radio" id="deliveryDHL" name="delivery" value-"dhl"- 


for="deliveryFedex">FedEx</label> 


type="radio" id-"deliveryFedex" name-"delivery" value="fedex"> 
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Delivery method 


UPS DHL FedEx 











5-18: 使 用 水 平 controlgroup 容器 时 ， 单 选 按钮 会 被 转换 为 开关 按钮 ， 选 中 的 值 将 使 用 
不 同 的 色 样 显示 





As a. 一 样 的 。 也 就 是 说 对 应 的 value 属性 将 与 选中 的 元 素 对 应 。 





1 虽然 jQuery Mobile 显示 的 单 选 按钮 的 外 观 完 全 不 同 ， 但 表单 的 工作 方式 是 
As 
4 





5.2.11 复 选 框 
复 选 框 与 单 选 按钮 的 工作 方式 类 似 (图 5-19)， 不 过 允许 多 选 。 下 面 是 使 用 一 个 单 
独 的 复 选 框 的 例子 : 








<label for="accept">I accept terms and conditions</label> 
«input type="checkbox" id-"accept" name-"accept" value-"yes"- 





| accept terms and 
conditions 


| accept terms and 
conditions 











5-19. 复 选 框 与 它 对 应 的 Label 被 泻 染 为 一 个 漂亮 的 按钮 ， 选 中 时 会 显示 一 个 复 选 框 按钮 


也 可 以 把 多 个 复 选 框 放 到 一 个 controlgroup 中 ， 这 样 将 得 到 一 组 多 选 按钮 的 界面 
(图 S-20) ; 














«legend»Delivery options«/legend» 
«div data-role-"controlgroup"» 


«label for-"optionGift"»Pack it as a Gift«/label» 
«input type="checkbox" id-"optionGift" name-"optionGift" value-"yes"'- 


«label for-"optionBag"»Send it with a bag«/label» 
«input type="checkbox" id-"optionBag" name-"optionBag" value-"yes"- 


«label for-"optionRemove"-Remove the box«/label-» 
«input type="checkbox" id-"optionRemove" name-"optionRemove" value-"yes"- 


</div> 





Delivery options 
Pack it as a Gift 
Send it with a bag 


Remove the box 








5-20: TB legend 元 素 的 组 合 复 选 框 创 建 了 一 个 漂亮 的 多 选 列表 


使 用 水 平 controlgroup 时 ， 界 面 将 变 成 一 个 多 选 开关 按钮 控件 ， 如 图 5-21 所 示 。 
如 果 按 钮 被 按 下 ， 表 示 它 是 一 个 被 选中 的 元 素 。 











5-21: 如 果 复 选 框 的 文本 标签 较 短 ， 并 且 数 量 少 于 5 个 ， 则 可 以 使 用 水 平 控件 组 来 得 到 一 
个 开关 按钮 形式 的 多 选 控件 
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«div data-role-"controlgroup" data-type-"horizontal"» 


«label for-"bold"-B«/label-» 
«input type="checkbox" id-"bold" name-"bold" value-"yes"- 


«label for-"italic"»I«/label» 
«input type="checkbox" id-"italic" name-"italic" value-"yes"- 


«label for-"underline"»U«/label» 
«input type="checkbox" id-"underline" name-"underline" value-"yes"- 


«/div» 


5.2.12 上传 文件 


由 于 在 一 些 智能 手机 和 平板 电脑 上 缺少 支持 ， 如 iOS (iPhone fll iPad), Android 2.2 
之 前 的 版 本 以 及 webOS， 在 移动 设备 上 文件 上 传 确实 是 个 问题 (图 5-22)。 出 于 各 
种 原因 ， 这 些 平台 不 支持 <input type="file">， 还 缺少 对 用 户 公 开 的 文件 系统 。 
jQuery Mobile 没有 对 上 传 文件 提供 特别 的 支持 ， 在 移动 浏览 器 上 实现 文件 上 传 时 需 
要 非常 小 心 。 








File to upload 


Choose File 














5-22: iOS 版 Safari 等 部 分 移动 浏览 器 及 平台 不 支持 文件 上 传 ， 只 能 得 到 一 个 被 禁用 的 标 
准 表单 控件 


一 些 新 的 设备 上 ， 如 Android 3.0 版 及 更 新 版 本 的 设备 ， 开 始 支持 HTML 媒体 捕获 
(HTML Media Capture) API， 人 允许 我 们 通过 一 个 文件 上 传 表单 域 请 求 摄 像 头 图 片 、 
视频 或 音频 。 可 以 在 http://mobilehtml5.org 查看 这 个 HTMLS API 的 兼容 情况 。 
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jQuery Mobile API 





jQuery Mobile 提供 了 使 用 JavaScript 与 框架 通信 以 及 进行 内 容 管理 的 API。 首 先 要 
知道 的 是 它 是 一 个 HTMLS 框架 ， 创 建 内容 的 最 佳 方式 是 使 用 无 侵入 性 的 HTML5。 


== 








使 用 JavaScript 代替 标记 语言 来 创建 页 面 和 内 容 时 ， 在 一 些 B 级 浏览 器 以 及 不 支持 
jQuery Mobile 的 老 平台 上 会 遇 到 兼容 性 问题 。 如 果 你 只 关注 现代 平板 电脑 或 智能 手 
机 ， 并 且 准 备 在 不 同 的 设备 上 测试 你 的 代码 ， 那 么 可 以 安全 地 使 用 JavaScript 以 及 
AJAX 代替 标记 语言 来 创建 内 容 。 








这 些 JavaScript API 不仅 可 用 于 创建 与 框架 兼容 的 动态 内 容 ， 还 提供 了 新 的 事件 机 
制 以 及 可 以 自行 定义 的 全 局 配置 。 


本 章 需 要 读者 对 JavaScript 以 及 jQuery 核心 框架 有 一 个 基本 的 了 解 。 


6.1 文档 事件 


网 页 上 经 常 使 用 页 面 的 Load 事件 来 配置 默认 值 和 初始 化 代码 。 使 用 jQuery 核心 框 
架 时 ， 你 可 能 也 喜欢 document 元 素 的 ready 事件 。 























操作 jQuery Mobile 文档 时 ， 需 要 理解 并 处 理 一 个 新 的 事件 : mobileinit。 这 个 新 
事件 在 jQuery Mobile 框架 载 入 完成 并 已 准备 好 执行 初始 化 代码 时 触发 。 这 个 事件 
应 该 使 用 jQuery 的 pind 方 法， 在 document 元 素 上 处 理 : 
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$(document).bind('mobileinit', function (){ 
// 这 儿 是 初始 化 代码 
p»: 
mobileinit 事件 会 在 jQuery Mobile 框架 载 和 内存 之 后 、UI 元 素 被 演 染 之 前 触发 。 
所 以 我 们 可 以 使 用 这 个 事件 处 理 程序 改变 一 些 UI 全 局 选项 。 


jQuery Mobile 文档 事件 的 执行 顺序 通常 是 : 


* mobileinit 
* ready 


* load 














Ar A: 28 E CD LA R zs Je BEC T AE Ue FCR, WS Sr EMH Load, 
Cm ready 或 mobileinit, 4^ jQuery Mobile 页 面 元 素 都 有 一 系列 的 可 以 绑 
定 的 事件 。 

















关于 mobileinit 事件 的 第 一 个 问题 是 应 该 把 它 放 在 哪儿 。 我 们 应 该 在 header 元 
素 中 的 指定 位 置 绑 定 这 个 事件 ， 具 体 来 说 ， 就 是 在 引入 jQuery 核心 以 及 引入 jQuery 
Mobile 之 间 的 位 置 。 因 为 我 们 需要 jQuery 对 象 $， 并 且 需 要 在 jQuery Mobile 框架 
执行 之 前 绑 定 它 。 








一 个 典型 的 带 脚本 配置 代码 的 jQuery Mobile 文档 模板 是 这 样 的 : 





<!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8" /> 
«title2My first jQuery Mobile code</title> 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/ 
jquery.mobile-1.0.min.css" /> 
<script srcz'http://code.jquery.com/jquery-1.6.4.min.js"»«/script» 


<!-- 自 定义 初始 化 代码 --> 


«script src="customcode.js"></script> 


«script src-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min. 
js"»«/script» 
«meta name-"viewport" content-"width-device-width, initial-scale-1"- 
«/head» 
</html> 


记 住 ， 出 于 性 能 考虑 ， 在 一 个 移动 页 面 上 添加 太 多 的 script 标签 不 是 好 习惯 。 有 
时 候 ， 将 所 有 自 定义 的 初始 化 代码 放 在 HTML. 文档 的 内 联 脚本 中 比 引入 一 个 外 部 文 
件 更 好 。 

















Em 














处 理 外 部 文档 时 需要 注意 ， 当 用 户 通过 首页 访问 你 的 网 站 时 ， 那 些 通过 




















AJAX 加 载 的 外 部 文档 中 的 script 标签 将 不 会 执行 ， 所 以 所 有 东西 者 











该 在 一 个 外 部 JavaScript 文件 中 定义 好 并 且 在 每 个 文档 中 引入 。 


























例如 ， 可 以 像 下 面 这 样 绑 定 mobileinit 事件 : 


这 个 框架 使 用 jQuery UI 桌面 版 框架 的 部 件 结构 。 所 谓 部 件 即 是 由 框架 管理 
JE jQuery Mobile 1.0 中 ， 部 件 通常 通过 data-role 属性 来 映射 ， 当 然 ， 也 有 不 带 














<script src-"http://code.jquery.com/jquery-1.6.4.min.js"»«/script» 


«script» 
$(document).bind("mobileinit", function() ( 


D; 


// 这 儿 是 初始 化 代码 


</script> 


BEZ 


<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"> 
</script> 


6.2 配置 


jQuery Mobile 在 jQuery 主 对 象 $ (或 者 jQuery) 上 添加 了 一 个 新 的 mobile 对 象 ， 
因此 ， 这 个 API 的 大 部 分 工作 都 将 使 用 $.mobile (或 者 jQuery.mobile) 来 完 
成 。 在 使 用 jQuery Mobile 时 ， 你 将 发 现 很 多 全 局 属性 以 及 有 用 的 方法 。 这 个 对 象 
只 在 mobileinit 事件 触发 后 才 可 用 。 











的 控件 。 


role 属性 的 表单 控件 。 因 此 ， page. button 以 及 listview 都 是 框架 内 置 的 部 
件 。 


每 一 个 部 件 都 有 一 个 对 象 构造 器 以 及 默认 配置 ， 这 些 默 认 配置 可 以 在 mobileinit 
中 更 改 ， 更 改 后 会 影响 到 该 页 面 上 的 每 一 个 部 件 。 


下 面 是 jQuery Mobile 1.0 中 可 用 部 件 的 列表 : 


page 


dialog 


collapsible 


fieldcontain 


navbar 


listview 


checkboxradio 


button 





jQuery Mobile API 


131 


* glider 
* textinput 
e Selectmenu 


* controlgroup 


— X jQuery Mobile 富 控件 被 组 织 为 一 个 部 件 。 例 如 ， 所 有 文本 输入 类 型 (包括 
textarea) 都 使 用 同一 个 部 件 textinput， 复 选 与 单 选 按钮 则 都 属于 checkboxradio 
部 件 。 

每 个 部 件 都 有 它 自 己 的 对 象 构造 器 ， 这 些 构 造 器 代表 了 页 面 上 每 个 对 象 的 工作 方式 。 
可 以 通过 $ .mobile.<widget name>.prototype 来 访问 相应 的 原型 。 通 常 ， 每 个 
部 件 构造 器 都 有 一 个 option 对 象 ， 通 过 这 个 对 象 可 以 定义 部 件 的 默认 属性 ， 例 如 ， 


$.mobile.page.prototype.options 可 用 于 定义 应 用 到 每 个 页 面 实 例 (aata- 
role-"page") 的 默认 属性 。 





记 住 ， 要 在 mopileinit 事件 处 理 程序 中 设置 全 局 或 部 件 的 默认 属性 ， 
EAS 如 果 在 这 个 事件 之 前 或 之 后 改变 默认 属性 ， 则 新 的 属性 可 能 不 会 在 文档 中 
生效 。 


LE 





























6.2.1 全 局 配置 
我 们 可 以 使 用 aata-* 属性 在 各 个 元 素 上 显 式 定义 的 大 部 分 值 ， 都 可 以 全 局 定义 并 
应 用 到 每 个 控件 上 ， 除 非 标 签 中 定义 了 新 的 值 。 


大 多 数 全 局 配置 的 值 都 可 以 在 mobileinit 事件 处 理 程序 中 通过 $ .mobile 对 象 
修改 。 





1. 用 户 界面 

默认 情况 下 ，jQuery Mobile 会 为 页 面 上 的 特定 元 素 分 配 一 些 类 ， 当 它们 被 激活 时 
再 分 配 别 的 类 。 这 些 类 根据 主题 样式 表 提 供 不 同 的 外 观 。 通 过 修改 字符 串 值 的 属性 
activePageClass fll activeBtnClass 可 以 修改 当前 活动 页 面 (在 多 页 面 的 文档 
中 ) 或 激活 按钮 的 类 名 。 上 默认 情况 下 ， 它 们 的 值 分 别 为 ui-page-active 和 ui- 
btn-active。 很 多 其 他 部 件 上 也 会 使 用 激活 按钮 状态 ， 如 基于 按钮 的 导航 条 、 单 选 
按钮 以 及 复 选 按钮 。 

有 两 个 (大 多 数 情 况 下 我 们 不 会 修改 的 ) 全 局 属性 可 用 于 修改 深 动 行为 。 默 认 情 
UL F, jQuery Mobile 文档 加 载 后 ， 它 会 从 顶部 向 下 访 动 到 恰好 隐藏 掉 地 址 栏 的 位 
置 。 可 以 通过 设置 defaultHomescroll 的 值 来 改变 这 个 行为 。 当 打开 一 个 页 面 然 
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后 再 一 次 回 到 这 个 页 面 时 ， 框 架 会 将 视 口 滚动 到 之 前 点 击 时 该 页 面 所 在 的 位 置 (lu 
住 位 置 )。 不 过 ， 如 果 该 页 面 非常 接近 顶部 〈 但 不 是 在 0 像素 的 位 置 )， 框 架 则 将 
停留 在 顶部 而 不 会 滚动 。 返 回 页 面 时 默认 的 最 小 滚动 值 是 250 像素 高 ， 可 以 通过 
minScrollBack 属性 修改 这 个 值 。 























最 后 ， 两 个 我 们 会 经 常 改 动 的 全 局 属性 是 页 面 和 对 话 框 加 载 的 默认 过 渡 效 果 。 默 
认 情 况 下 ， 它 们 的 值 为 slide 以 及 pop， 可 以 通过 de£aultPageTransition 和 
defaultDialogTransition 属性 来 改变 它们 。 

















下 面 的 示例 将 改变 若干 用 户 界面 的 默认 值 ; 


$(document).bind("mobileinit", function() ( 
// 改变 默认 值 
$.mobile.defaultPageTransition = "fade"; 
$.mobile.minScrollBack - 150; 
$.mobile.activeBtnClass = "active-button"; 


p: 


2. 核心 及 AJAX 功 能 

jQuery Mobile 的 一 些 核心 功能 可 以 通过 对 应 的 全 局 属性 来 操作 。 如 果 我 们 在 使 用 另 
一 个 可 能 会 与 jQuery Mobile 冲突 的 框架 ， 可 以 使 用 ns 全 局 属性 来 定义 一 个 命名 空 
间 。 上 默认 情况 下 命名 空间 没有 定义 ， 定 义 命名 空间 的 示例 代码 如 : 

















$(document).bind("mobileinit", function() ( 
// 改变 默认 值 
$.mobile.ns = "firt"; 


p: 
之 后 ， 所 有 data-* 属性 将 变 成 data-< 命名 空间 >-*， 如 上 面 的 例子 中 将 变 成 
data-firt-*， 这 包括 每 一 个 jQuery Mobile 自 定义 属性 如 data-role (将 转变 为 
data-« 命名 空间 >-role)。 在 新 的 命名 空间 下 ，— 典 型 的 页 面 模板 将 变 成 : 





«div data-firt-role="page"> 
«div data-firt-role-"header" data-firt-theme="a"> 


«/div» 
«div data-firt-role-"content"- 


</div> 
</div> 





如 果 定 义 了 命名 空间 ， 那 么 也 需要 手动 修改 对 应 的 CSS 文件 (包括 结构 和 
ERAS 主题 文件 ) 以 便 识别 新 命名 空间 。 例 如 ， 需 要 将 [aata-role-page] 条 件 
选择 符 替 换 为 匹配 新 命名 空间 的 值 ， 如 [aata- 命名 空间 -role-pagel. 
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jQuery Mobile 的 核心 功能 之 一 是 用 于 加 载 外 部 页 面 的 AJAX 框架 。 我 们 可 以 设 
置 布尔 值 属 性 ajaxEnabled 来 禁用 所 有 的 AJAX 功能 。 如 果 使 用 $ .mobild. 
ajaxEnaled=false 把 它 禁 用 了 ， 那 么 所 有 外 部 页 面 都 将 通过 浏览 器 使 用 完整 的 
HTTP 请 求 加 载 。 


默认 情况 下 ，XMLHttpRequest (AJAX 背后 的 对 象 ) 不 支持 跨 域 请 求 。 这 意味 着 ， 
如 果 我 们 的 页 面 在 domainl.com 上 ， 那 就 不 能 通过 AJAX 加 载 domain2.com 的 页 
面 。 这 种 情况 下 ， 框 架 将 自动 使 用 完整 的 HTTP 请 求 。 在 一 些 特殊 情况 下 我 们 可 以 
使 用 跨 域 请 求 ， 这 时 可 以 通过 allowCrossDomainPages 属性 来 强制 框架 支持 。 














一 些 新 的 移动 浏览 器 支持 跨 域 资 源 共 享 (Corss Origin Resource Sharing， 
-CD CORS)， 这 是 一 份 W3C 的 草案 ， 见 http://w3.org/TR/cors。 根 据 这 个 标准 ， 
如 果 服 务 器 返回 了 相同 的 指定 的 HTTP 头 ， 则 浏览 器 将 支持 跨 域 请 求 。 可 
以 在 http://mobilehtml5.org 上 验证 移动 浏览 器 对 CORS 的 支持 。 




















如 果 你 正在 创建 一 个 离线 应 用 或 混合 解决 方案 ， 如 PhoneGap 或 RhoMobile 应 用 ， 
将 主要 使 用 file:// 协议 来 加 载 页 面 (本 地 文件 )。 这 些 框架 允许 你 发 起 对 互联 网 
上 任何 域名 的 AJAX 请 求 ， 所 以 如 果 你 正在 创建 这 种 应 用 并 想 通 过 网 络 加 载 外 部 页 
面 ， 则 应 当 使 用 $.mobile.allowCrossDomainPages-true 来 开启 它 


有 些 部 件 ， 如 骨 套 列表 视图 ， 会 动态 地 生成 新 的 页 面 。 每 个 新 页 面 都 需要 有 一 个 名 
字 (HF hash, URL 8 或 其 他 用 途 )。 默认 情况 下 ，jQuery Mobile 使 用 ui-page fF 
为 参数 名 ， 也 可 以 通过 $.mobile 对 象 的 subPageUr1lKey 属性 改变 这 个 值 。 对 对 
话 框 来 说 ， 有 一 个 默认 与 ui-state=dialog 关联 的 dialogHashKey 属性 。 通 常情 
况 下 不 需要 修改 这 些 属性 。 


框架 默认 会 改变 所 有 链接 的 行为 ， 可 以 通过 $ .mobile.linkBindingEnabled= 
false 来 禁用 这 个 特性 ， 以 便 让 jQuery Mobile 支持 不 同 的 功能 。 默 认 情 况 下 ， 
jQuery Mobile 会 在 DOM 就 绪 后 对 文档 中 的 第 一 个 页 面 执行 wt, 可 以 通过 


$.mobile.autoInitializePage-false 来 禁用 这 个 行为 。 









































通过 $.mobile.hashListeningEnabledq=false， 我 们 也 可 以 禁用 自动 散 列 读 取 ， 
即 禁止 用 户 在 点 击 训 览 器 或 设备 的 前 进 和 后 退 按钮 时 页 面 自动 前 进 和 后 退 的 行为 。 





3. 本 地 化 字符 串 

jQuery Mobile 中 有 一 些 硬 编码 的 字符 串 值 ， 可 以 将 它们 修改 或 本 地 化 为 其 他 语言 。 
其 中 一 些 值 在 典型 的 jQuery Moile 文档 中 不 可 见 ， 这 是 因为 它们 是 用 于 语义 信息 或 
可 访问 性 的 (以 便 屏幕 阅读 器 知道 它们 是 什么 )。 
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可 修改 的 字符 串 包 括 : 使 用 AJAX 加 载 外 部 页 面 时 显示 的 加 载 消息 、 外 部 页 面 无 法 
加 载 时 的 加 载 错误 消息 以 及 一 些 其 他 基于 组 件 的 消息 。 


下 面 是 各 个 消息 的 列表 及 默认 值 : 


// 全 局 字符 串 





$.mobile. 
$.mobile. 





loadingMessage - "loading"; 
pageLoadErrorMessage - "Error Loading Page"; 


// 组 件 字符 串 


$.mobile. 
$.mobile. 
$.mobile. 


contents"; 


$.mobile. 


contents"; 


$.mobile. 
$.mobile. 


page.prototype.options.backBtnText - "Back"; 
dialog.prototype.options.closeBtnText - "Close" 
collapsible.prototype.options.expandCueText - " click to expand 
collapsible.prototype.options.collapseCueText - " click to collapse 
listview.prototype.options.filterPlaceholder - "Filter items..."; 
selectmenu.prototype.options.closeText = "Close"; 





因此 ， 可 以 使 用 类 似 下 面 的 代码 来 创建 一 个 中 文 版 本 的 jQuery Mobile 文本 方案 : 








$(document).bind('mobileinit', function() ( 
// 全 局 字符 串 
$.mobile.loadingMessage = "正在 加 载 "; 
$.mobile.pageLoadErrorMessage = " 加 载 页 面 出 错 ; 


// 组 件 字符 串 








$.mobile.page.prototype.options.backBtnText = " 后退" 
$.mobile.dialog.prototype.options.closeBtnText = "关闭 " 
$.mobile.collapsible.prototype.options.expandCueText = " 点 击 展开 " 
$.mobile.collapsible.prototype.options.collapseCueText = " 点 击 收 起 " ; 
$.mobile.listview.prototype.options.filterPlaceholder = "x"; 
$.mobile.selectmenu.prototype.options.closeText = " XH]"; 


p: 


4. Touch overflow 


前 面 我 们 讨论 过 ， 在 jQuery Mobile 1.0 中 ， 固 定 工 具 栏 (使 用 data-position- 
"fixed") 并 不 会 生成 一 个 真正 固定 的 工具 栏 ， 只 会 在 不 滚动 页 面 的 情况 下 模拟 固 


定 工具 栏 。 如 


TE iOS 5.0 中 ， 





图 6-1 所 示 。 


Safari 支持 position:fixed 元 素 ， 使 用 overflow:scroll 可 支持 


在 区 块 中 单 指 滚 动 ， 还 支持 一 个 新 的 名 为 over£flow-scrolling:touch 的 预定 义 


扩展 。 默 认 情 


况 下 ， 这 个 行为 是 被 禁用 的 ， 不 过 如 果 想 在 OS 5 (将 来 可 能 还 包括 


其 他 平台 ) 中 提供 一 个 真正 的 固定 工具 栏 ， 只 需 启 用 touchoverflowEnabled 即 
可 。 在 不 支持 的 平台 上 ， 它 会 降级 为 普通 的 jQuery Mobile 固定 工具 条 。 
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$(document).bind('mobileinit', function() ( 
$.mobile.touchOverflowEnabled-true; 


Tes 


Content area 





Scrolling area 


6-1. 作用 触摸 溢出 固定 页 头 后 ， 页 面 将 以 另 一 种 方式 设计 











内 容 区 域 将 有 自己 的 滚动 区 


加 














w^ Android 3.0 及 PlayBook 上 的 BlackBerry 浏览 器 也 支持 使 用 overflow: 
p^ 。 scroll 来 实现 块 级 元 素 内 的 滨 动 。jQuery Mobile 1.1 版 开始 将 自动 支持 这 
l 些 浏览 器 。 


开启 这 个 属性 之 后 ， 还 可 以 使 用 touchoverflowZoomEnabled 来 开启 缩放 。 这 个 
选项 可 能 会 引起 可 用 性 问题 ， 因 此 请 小 心 使 用 。 未 来 这 两 个 属性 将 不 能 同时 开启 ， 
因为 它们 将 被 默认 的 固定 工具 栏 的 行为 灰 代 。 








6.2.2 NAMA 
页 面 由 data-role="page" 定义 ， 每 个 页 面 都 有 若干 默认 选项 ， 这 些 默认 选项 可 以 
通过 data-* 属性 来 修改 。 要 改变 默认 设置 ， 只 需 改变 每 个 页 面 实例 的 prototype 
的 options 属性 即 可 。 








例如 ， 如 果 想 为 每 个 访问 历史 记录 中 包含 前 一 页 的 页 面 提供 一 
只 需 指 定 addBackBtn 属性 为 trues 
来 改变 后 退 按钮 的 文本 及 主题 。 


还 可 以 通过 


除 此 之 外 ， 也 可 以 通 

改变 默认 的 主题 。 

例如 : 

$(document).bind('mobileinit', function() ( 

$.mobile.page.prototype.options.addBackBtn - true; 
$.mobile.page.prototype.options.backBtnTheme - "e"; 
$.mobile.page.prototype.options.headerTheme - "b"; 
$.mobile.page.prototype.options.footerTheme - "d"; 


创 








p 


每 次 通 
loadPage.def 





建 全 屏 WebApp. i 
个 可 见 的 后 退 按钮 ， 为 了 实现 这 一 


定 $.mobile. page.prototype.options.addBackBtn-true, 





aults 对 象 找到 这 





合 或 Xin 应 用 时 ， 应 该 总 是 
点 ， 需 要 处 理 mobileinit 


个 可 见 的 后 退 按钮 ， 


过 backBtnText 和 backBtnTheme 


Į Æ headerTheme. footerTheme 以 及 contentTheme 来 


在 页 头 中 提供 一 











事件 ， 并 指 

















过 AJAX 从 外 部 加 载 页 面 时 ， 都 有 一 些 默认 属性 被 应 用 。 可 以 从 $.mobile. 


文 些 属性 ， 表 6-1 列 出 了 它们 可 能 的 值 。 



































































































































表 6-1: $.mobile.loadPage.defaults 属 性 
属 ”性 可 接受 的 值 Sk GA 值 描 xk 
type "get"/"post" "get" 指定 AJAX 请 求 类 型 
data object/string 如 果 type 为 "post"， 可 以 这 儿 设 置 要 发 
reloadPage trye/false false 指定 如 果 页 面 已 在 DOM 中 有 缓存 的 情况 
下 是 否 重新 加 载 页 面 
role string < Hi data-role 指定 > | 指定 应 用 到 目标 页 面 的 role 
showLoadMsg |true/false true 指定 请 求 超时 的 情况 下 是 否 显 示 加 载 消息 
loadMsgDelay |milliseconds |50 在 显示 加 载 消 息 之 前 等 待 多 少 毫秒 
theme a 到 z c 默认 应 用 到 各 页 面 的 色 样 
domCache true/false false 指定 是 否 将 页 面 缓存 在 DOM 中 
如 果 只 是 想 改变 一 个 页 面 而 不 是 所 有 页 面 的 加 载 属 性 ， 可 以 使 用 $ .mobile. 











changePage 属性 。 
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6.2.3 部 件 配置 

jQuery Mobile 中 的 每 个 部 件 (widget) 都 有 自己 的 默认 配置 属性 。 记 住 ， 可 以 
通过 部 件 的 prototype 属性 中 的 options 对 象 来 改变 部 件 的 默认 设置 ， 接口 为 
$.mobile.« 部 件 名 >.prototype.options。 例 如 : 


$(document).bind('mobileinit', function() ( 
// 在 所 有 1istviews 中 启用 过 滤 


$.mobile.listview.prototype.filter = true; 








// 在 所 有 选择 框 上 启用 非 原生 菜单 


$.mobile.selectmenu.prototype.nativeMenu-false; 














大 多 数 部 件 都 支持 theme 默认 属性 。 因 此 ， 如 果 想 让 所 有 选择 菜单 都 默认 
使 用 主题 。， 可 以 使 用 $ .mobile.selectmenu .prototype.theme="e" 
来 实现 。 




















表 6-2 展示 了 我 们 可 以 改变 的 部 件 属性 。 
表 6-2: 各 部 件 默认 属性 







































































































































































部 d 属 性 f& ( 默认) 描 xh 
< 所 有 部 件 > [theme a 到 z 应 用 到 每 个 部 件 实例 的 色 样 
listview filter true/ (false) 在 每 个 列表 视图 上 开启 过 滤 
listview filterPlaceHolder | string 过 滤 文 本 框 中 的 占 位 文本 
listview filterTheme afl z 过 滤 文 本 框 的 色 样 
navbar iconpos (top)/bottom/left/right | 导航 栏 元 素 的 图 标 位 置 
slider trackTheme afl z Iram eg 
Selectmenu |icon icon 值 (arrow d) 选择 菜单 打开 按钮 的 图 标 
selectmenu |iconpos top/bottom/left/(right) | 图 标 位 置 
selectmenu |corners (true) /false 打开 按钮 使 用 圆 角 
selectmenu |shadow (true)/false 打开 按钮 使 用 阴影 
selectmenu |iconshadow (true) /false 打开 按钮 的 图 标 使 用 阴影 
selectmenu |menuPageTheme a fil z (b) 导航 菜单 的 色 样 
selectmenu |overlayTheme a $l z (a) 非 原 生 覆 盖 层 的 色 样 
selectmenu |closeText string 非 原生 菜单 的 关闭 按钮 的 文案 
selectmenu |nativeMenu (true)/false 指定 是 否 使 用 原生 选择 菜单 
dialog closeBtnText string 关闭 按钮 的 文案 
dialog overlayTheme a fil z(a) 对 话 覆 盖 层 的 色 样 
collapsible |expandCueText string 打开 按钮 的 文案 
collapsible |collapseCueText |string 关闭 按钮 的 文案 
collapsible |collapsed (true) /false 指定 当前 折 双 部件 默认 为 开启 
collapsible |heading 英文 逗号 分 隔 的 值 用 于 折 双 部件 头 部 的 标签 列表 
collapsible |contentTheme a 到 z 内 容 的 色 样 
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部 件 属 性 f& ( 默认 ) 描 x 
collapsible |iconTheme a Ël] z 页 头 图 标的 色 样 
button icon 到 标 值 每 个 按钮 的 默认 图 标 
button iconpos 到 标 位 置 每 个 按钮 图 标的 默认 位 置 
button inline true/ (false) 每 个 按钮 是 否 为 内 联 
button corners (true) /false 每 个 按钮 是 否 使 用 圆 角 
button shadow (true)/false 每 个 按钮 是 否 使 用 阴影 
button iconshadow (true)/false 按钮 图 标 是 否 使 用 阴影 











6.3 ”实用 工具 


jQuery Mobile 提供 了 很 多 使 用 JavaScript 来 管理 应 用 的 实用 工具 ， 这 些 工具 通过 方 
法 以 及 只 读 属 性 提供 ， 让 我 们 使 用 JavaScript 创建 更 好 的 体验 。 


6.3.1 Data-* 工 具 
使 用 jQuery Mobile 时 经 常 需要 处 理 aata-* 自 定义 属性 。 例 如 ， 想 取得 页 面 上 按钮 
的 集合 ， 可 以 使 用 jQuery: 


var buttons = $( [data-role-button]"); 


jQuery Mobile 添加 了 一 个 新 的 名 为 jampata 的 过 滤器 ， 并 会 
空间 。 上 面 的 代码 可 以 很 容易 并 且 安 全 地 更 改 为 : 

var buttons = $("a:jqmData(role-'button')"); 
同时 ， 在 jQuery 集合 对 象 上 应 该 使 用 jqmpata 和 jamRemoveData 来 代替 原来 的 
jQuery 国 数 data 和 removeData， 例 如 : 


应 用 我 们 指定 的 命名 


$("a").jgmRemoveData ("transition"); 
$("ibuttonl").jqmData("theme", "a"); 


6.3.2 页面 工具 

如 果 需 要 访问 当前 页 面 ， 可 以 使 用 jQuery Mobile 提供 的 $.mobile.activePage 
属性 ， 该 属性 自动 与 当前 可 见 的 data-role="page" 元 素 关 联 。 这 个 属性 指向 对 应 
的 jQuery DOM 对 象 (通常 是 一 个 div 元 素 ) 


var currentPageId = $.mobile.activePage.id; 


可 以 通过 $ mobile. pageContainer mH 属性 访问 当前 页 面 的 容器 (通常 为 body 元 素 )。 


架 中 最 有 用 的 工具 是 
a E 


$.mobile.changePage 方 法 ， 它 允许 我 们 转向 另 一 个 页 
可 以 在 JavaScript 中 通过 这 个 方法 来 显示 内 
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部 或 外 部 页 面 。 





一 些 工 具 在 mobileinit 事件 被 触发 后 才 可 用 ， 因 此 不 能 在 这 个 事件 处 理 


MASS 程序 中 使 用 这 些 工具 


这 个 方法 的 第 一 个 必 选 参数 可 以 是 一 个 字符 串 值 (意味 着 它 是 一 个 外 部 页 面 的 
URL) ， 也 可 以 是 一 个 指向 内 部 页 面 的 jQuery 对 象 。 


可 以 像 这 样 加 载 外 部 页 面 external.html : 





























$.mobile.changePage("external.html"); 


要 转向 当前 文档 中 已 经 存在 的 内 部 页 面 ， 可 以 使 用 : 


$.mobile.changePage ($ ("#pageId")); 











不 能 只 通过 字符 串 "#pagera" 来 加 载 内 部 页 面 ， 必 须 通过 jQuery 传 入 对 
-Ee 应 的 DOM 对 象 ， 如 $s ("#pageId")。 











页 面 过 渡 选 项 
changePage 方法 的 第 二 个 可 选 参数 是 一 个 对 象 ， 通 常 为 JSON 格式 ， 用 于 定义 页 
面 过 渡 以 及 /或 者 AJAX 加 载 的 可 选 选项 。 


所 有 选项 见 表 6-3。 
表 6-3: changePage 操 作 的 可 选 属性 














































































































BE 性 值 默 认 值 描 R 
transition 过 渡 名 slide 要 应 用 的 过 渡 效 果 
reverse true/false false 过 渡 效 果 是 否 反 转 (通常 用 于 返 
回 操作 ) 
type "get"/"post" "get" 用 于 加 载 外 部 页 面 的 HTTP 方法 
data object 或 string 使 用 POST 方法 时 发 送 的 数据 
allowSamePageTransition |true/false false 允许 转向 当前 激活 的 同一 个 页 
面 (转向 自身 ) 
changeHash true/false true 决定 新 页 面 是 否 加 入 历史 记录 
data-url string 将 写 入 地 址 的 URL 
pageContainer jQuery DOM 对 象 用 于 添加 新 页 面 的 容器 
reloadPage true/false false 强制 刷新 页 面 ， 即 便 它 已 经 在 
当前 DOM 中 缓存 了 
showLoadMsg true/false true 在 若干 毫秒 后 是 否 显示 页 面 加 
载 消息 
role page/dialog data-role | 应 用 到 新 页 面 的 role 
定义 














可 以 用 类 似 下 面 的 代码 来 强制 使 用 反 转 slide 


$.mobile.changePage ($("page2"), { 
transition: "slide", 


reverse: true 


s 








过 渡 效 果 : 


下 面 的 示例 将 通过 POST 方式 发 送 数据 并 加 载 一 个 外 部 页 面 : 








«script» 


function viewProduct (idProduct) ( 
$.mobile.changePage ("productdetail.php", { 
method: "post", 


data: { 
action: 


'getProduct', 


id: idProduct 


hh 


transition: 
D; 
} 


</script> 


y esm WEN 


"fade" 


«a href-"javascript:viewProduct (5200)" data-role="button">Product details</a> 





记 住 ， 即 使 通 


-Ee Mobile 文档 ， 

















过 POST 方式 加 载 页 面 ， 





AMAK data-role-"page". 


目标 页 面 仍 然 必 须 是 一 个 jQuery 


还 有 一 个 $.mobile.1loadPage 方法 ， 主 要 由 changePage 在 加 载 外 部 页 面 时 使 用 。 
这 个 方法 会 将 目标 页 面 加 载 到 当前 DOM 中 ， 但 并 不 会 转向 它 。 要 转向 新 页 面 ， 需 
以 使 用 Sich cM) 预 加 载 指定 内 容 并 将 它 插 入 DOM 中 ， 


要 使 用 changePage。 可 


然后 再 使 用 对 应 的 jQuery DOM 对 象 通 


6.3.3 平台 工具 


过 changePage 方法 转向 它 。 


框架 为 我 们 提供 了 一 些 平台 工具 ， 可 用 于 协助 网 站 开发 。 表 6-4 显示 了 最 有 用 的 平 


台 工 具 


vo 


表 6-4: $ .mobile 对 象 中 的 用 于 查询 当前 平台 的 工具 


方法 /属性 


描 g 





orientationChangeEnable 


原生 的 orientationchange 




















事件 是 否 可 用 





















































gradeA() MEBETUDEISESTONSSMUMISRUSEEE TUS TUN. 则 返回 true 
urlHistory 页 面 不 刷新 的 情况 下 在 jQuery Mobile 中 访问 过 的 页 面 的 集合 ， 每 个 元 

素 都 有 pageUrl、 title、 [以 及 transition 属性 
getDocumentUrl() 返回 原始 文档 的 URL (第 一 个 加 载 的 文档 ) 
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方法 /属性 描 xh 
getDocumentBase () 返回 原始 文档 的 base 属性 
keyCode 于 处 理 键盘 事件 的 预定 义 的 常量 ， 包 括 : ALT. BACKSPACE. 
COMMAND, COMMAND LEFT, COMMAND RIGHT, DELETE, DOWN, UP, 
RIGHT, LEFT, END, ENTER, ESCAPE, HOME, INSERT, MENU, 
PAGE DOWN, PAGE UP, PERIOD, SHIFT, SPACE, TAB, WINDOWS 
getScreenHeight() 取得 当前 屏幕 的 高 度 











6.3.4 REIR 











ï 


jQuery Mobile 中 有 一 些 路 径 管理 工具 ， 可 以 通过 公共 方法 $.mobile.path 访问 。 














具体 方法 见 表 6-5, 


XX«6-5; $ .mobile.path 对 象 中 的 路 径 工具 
5 ”法 


fü 述 





parseUrl (url) 





返回 一 个 对 象 ， 各 个 属性 对 应 该 URL 的 各 
个 部 分 (protocol. hostname. port, 


pathname, directory. filename, 


hash 以 及 更 多 ) 








makePathAbsolute(relativePath, absolutePate) 





基于 相对 路 径 返 回绝 对 路 径 














makeUrlAbsolute(relativeUrl, absoluteUrl) 











基于 相对 URL 返回 绝对 URL. 









































isSameDomain (Url1, Url2) 如 果 两 个 URL 同 域名 则 返回 true 
isRelativeUrl (Url) 如 果 URL 是 相对 地 址 则 返回 true 
isAbsolute (Url) 如 果 URL 是 绝对 地 址 则 返回 true 


6.35 ”UI 工具 








最 后 类 工具 是 关 于 用 户 界面 的 。 使 用 $.mobile.getInheritedTheme (element, 


defaultSwatch) 方法 ， 可 以 取得 元 素 基 于 色 样 





定义 或 继承 链 应 该 应 用 的 色 样 。 


fi FH $.mobile.silentscroll(y) 可 以 将 页 面 读 动 到 任意 位 置 ， 同 时 不 显示 动 
画 ， 也 不 触发 任何 事件 。 使 用 $ .mobile.showPageLoadingMsg() 和 8$.mobile. 
hidePageLoadingMsg()， 可 以 显示 及 隐 蕊 弹出 的 加 载 消息 。 








// 这 段 代 码 将 显示 加 载 消 息 ， 并 在 2 秒 后 将 其 隐藏 
$.mobile.showPageLoadingMsg(); 


setTimeout (function() ( 
$.mobile.hidePageLoadingMsg(); 
), 2000); 








最 后 ， 可 以 通过 $.mobile.fixedToolbars.show() LAX $.mobile.fixedToolbars. 
hide () 显示 及 隐藏 固定 工具 栏 (如 前 儿童 所 讲述 的 那样 )。 工 具 栏 可 以 全 屏 或 者 固 





定 显示 。 在 iOS 5 中 ， 无 法 隐藏 真正 的 固定 工具 条 。 默 认 情 况 下 ， 工 具 条 显示 或 隐 
藏 时 使 用 谈 入 淡出 效果 ， 可 以 指定 一 个 true ZZ. S.mobile.fixedToolbars. 
show (true) 将 立即 显示 工具 栏 ， 而 不 再 会 有 淡 入 淡出 动画 。 


6.4 ”有 自 定 义 过 渡 


第 三 章 提 到 过 在 jQuery Mobile 1.0 中 所 有 可 用 的 过 渡 效 果 。 我 们 可 以 定义 自己 的 过 
渡 效 果 吗 ? 当然 可 以 ， 并 且 有 两 种 实现 方法 : 


。 使 用 CSS3 动画 ， 
。 使 用 JavaScript, 








定义 一 个 data-transition 属性 (或 者 从 JavaScript 中 应 用 一 个 过 渡 ) 时 ，jQuery 
Mobile 首先 会 检查 这 个 名 字 在 框架 中 是 否 已 经 存在 。 如 果 不 存在 ， 则 继续 在 
$.mobile.transitionHandlers 集合 中 查找 。 如 果 过 渡 名 未 知 并 且 在 集合 中 也 未 
定义 ， 则 使 用 默认 过 渡 效 果 。 


默认 的 过 渡 效 果 可 以 被 修改 ， 它 必须 是 一 个 处 理 函 数 。 默 认 情 况 下 ， 后 备 过 渡 被 映 
射 为 一 个 使 用 CSS3 动画 (参见 下 一 章 ) 的 自 定义 过 渡 。 


也 可 以 将 默认 过 渡 映 射 到 $$ .mobile.noneTransitionHandler,， 后 者 将 简单 地 显 
示 新 页 面 并 隐藏 老 页面 ， 没 有 任何 动画 效果 。 


例如 ， 可 以 添加 一 个 explode 过 渡 类 型 : 

















$.mobile.transitionHandlers.explode = explodeTransitionHandler; 
也 可 以 修改 默认 的 过 渡 ， 将 它 赋 值 为 任何 其 他 处 理 函数 : 

$.mobile.defaultTransitionHandler = explodeTransitionHandler; 
过 渡 处 理 函 数 是 一 个 JavaScript 函数 ， 接 受 四 个 参数 : 


。 过 渡 名 ; 

e reverse， 如 果 设 置 为 tue， 表 示 本 过 渡 将 反 转 调用 ，; 
。 toPage， 指 问 目 标 页 面 的 jQuery DOM 对 象 ; 

。 fromPage， 指 向 原始 页 面 的 jQuery DOM 对 象 。 


可 以 使 用 任意 JavaScript 代码 来 实现 过 渡 效 果 ， 只 需 确认 一 点 : 最 后 需要 从 原始 页 
面 上 移 除 $.mobile.activePageclass， 并 将 它 应 用 到 目标 页 面 上 。 











jQuery Mobile API | 143 





使 用 基于 JavaScript 的 过 渡 时 要 小 心 ， 在 一 些 平台 上 可 能 会 遇 到 兼容 或 性 
"ED 能 问题 。 使 用 之 前 请 先 做 大 量 的 测试 。 














65 动态 内 容 


使 用 数据 库 驱 动 站 点 等 动态 内 容 时 ， 我 们 可 能 不 想 动态 地 创建 那些 jQuery Mobile 


文档 ， 而 想 用 JavaScript 和 AJAX 来 改变 、 Bue Web 应 用 中 的 信息 。 











在 不 支持 jQuery Mobile 的 浏览 器 上 ， 使 用 基于 JavaScript 的 元 素 而 不 是 语 
ED 义 标记 时 可 能 会 遇 到 问题 。 不 过 如 果 目 标 为 智能 手机 及 平板 电脑 则 不 会 有 


问题 。 























6.5.1 创建 页 面 
可 以 动态 创建 页 面 吗 ? 我 们 知道 页 面 只 是 一 个 带 有 属性 aata-role 的 div 元 素 ， 

















所 以 首先 可 以 考虑 通过 这 个 特性 实现 。 让 我 们 试 一 下 ， 创 建 一 个 基本 的 页 面 ， 再 从 





这 个 基本 的 页 面 上 使 用 JavaScript 动态 地 创建 四 个 页 面 : 





«div data-role="page"> 
«div data-role="header"> 
«hl»Dynamic page</hi> 


</div> 
«div data-role="content"> 
«a id="buttonl" href-"javascript:addPages()" data-role="button"> 


Add Pages</a> 
«ul id="listl"> 


</ul> 


</div> 
</div> 


然后 在 一 个 脚本 中 我 们 定义 动态 创建 页 面 的 函数 ， 并 添加 转向 这 些 页 面 的 按钮 : 





function addPages() { 
for (var i-1; i«5; i++) ( 


var page = $("«div»").jqmData("role", "page").attr("id", "page" + i); 

// Wk 

$("«div»").attr("data-role", "header").append($("«h1»2»") 
.html("Page " + i)).appendTo(page); 

// 内 容 

$("«div»").attr("data-role", "content").append($("«p»") 


.html("Contents for page " + i)) 
.appendTo (page) ; 


$("body").append(page); 





$("«li»").append($("«a»").attr("href", "#page"+i).html ("Go to 
page " « i)) 
.appendTo ("#list1"); 


S$("ftibutton1").hide(); 


); 


图 6-2 显示 了 这 个 示例 的 实际 效果 ， 可 以 看 到 ， 在 页 面 加 载 后 动态 创建 的 页 面 可 以 
工作 ， 但 页 头 样式 有 误 。 








动态 创建 页 面 有 一 个 缺点 : 如 果 用 户 在 某 个 新 创建 的 页 面 上 刷新 当前 页 面 ， 
"ED 必须 监听 mobileinit 并 检查 (通过 读 取 页 面 地 址 中 的 散 列 值 或 某 个 页 面 
事件 ) 用 户 是 否 正在 加 载 某 个 动态 页 面 ， 否 则 无 法 刷新 。 第 二 次 加 载 时 ， 
动态 页 面 将 不 存在 ， 得 根据 需要 再 次 创建 。 
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6-2: 动态 创建 的 页 面 与 原来 就 有 的 页 面 一 样 可 以 工作 

可 以 在 jQuery DOM 元素 上 调用 page() 方法 来 增强 动态 插入 的 页 面 ， 比 如 
$ ("#page1").page()o 

创建 动态 页 面 的 最 佳 方法 是 只 连接 它们 ， 例 如 ， 连 到 £page1 并 捕获 pagebeforechange 
事件 ， 修 改 框架 对 应 的 行为 。 下 一 章 将 讲解 这 个 事件 ， 也 可 以 通过 下 面 的 例子 来 理 
解 它 : 

















<!DOCTYPE html» 

«html xmlns-"http://www.w3.0rg/1999/xhtml"- 
«head» 

«meta charset-"UTF-8" /> 

«title»jQuery Mobile</title> 

«Script src-"jquery.js"»«/script» 
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«link rel="stylesheet" type="text/css" href-"jquery.mobile-1.0.css"» 
«script src-"jquery.mobile-1.0.js"»«/script» 
«script» 
$(document).bind('pagebeforechange', function(event, data) ( 
// 从 data.toPage 中 收 到 目标 页 面 ， 将 它 标准 化 
var url = $.mobile.path.parseUrl(data.toPage).hash; 


if (url!-undefined && url.length»5 && url.substring(0, 5)=="#page") ( 
// 动态 插入 一 个 新 页 面 


var id = url.substring(5); 





// 使 用 DoM 中 已 经 存在 的 页 面 模板 
$ ("#pageTemplate hl").html("Page " + id); 








// 转向 真实 的 页 面 模板 ， 同 时 不 在 访问 历史 上 使 用 真实 页 面 
$.mobile.changePage ($ ("#pageTemplate"), (dataUrl: data.toPage]); 





























// 阻止 正常 页 面 过 渡 


event.preventDefault(); 


p: 


</script> 
<meta name="viewport" content="width=device-width,user-scalable=no"> 


</head> 


<body> 
<div data-role="page"> 
<div data-role="header"> 
<hl>Dynamic pages</h1> 
</div> 
<div data-role="content"> 
«a id="button1" href="#pagel" data-role-"button"»Page 1«/a» 
«a id="button1" href="#page2" data-role-"button"»Page 2«/a» 
«a id="button1" href="#page3" data-role-"button"»Page 3«/a» 
«a id-"buttonl" href="#page4" data-role-"button"»Page 4«/a» 
«/div» 
</div> 
<div data-role="page" id="pageTemplate"> 
<div data-role="header"> 
<hl>Header</h1> 
</div> 
<div data-role="content">Content</div> 
<div data-role="footer"> 
<h4>Footer</h4> 
</div> 
</div> 
</body> 
</html> 





页 面 泻 染 完成 后 使 用 Javaseript 插入 其 他 组 件 时 ， 如 果 不 触 发 create 事 
UE 件 ， 这 些 组 件 可 能 无 法 正常 泻 染 。 
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6.5.2 ”创建 部 件 

6-2 中 有 一 个 带 四 个 项 目的 列表 ， 但 显然 将 ID 为 listi 的 列表 转换 成 1istview 
会 更 好 一 些 。 你 可 能 在 想 : 在 对 应 的 ul 上 加 一 个 data-role-s"listview", 不 过 
这 不 会 起 作用 ， 因 为 页 面 已 经 加 载 完 成 了 ， 在 初始 化 时 这 个 列表 没有 被 当 作 列表 视 
图 部 件 处 理 。 
动态 创建 部 件 需要 调用 部 件 对 应 的 构造 器 。 每 个 部 件 都 有 自己 的 构造 器 ， 它 们 就 是 
与 部 件 名 同名 的 jQuery 函数 ， 因 此 ， 如 果 我 们 执行 $ ("#1list1") .1istview()， 
则 该 ul 将 马上 被 转换 并 泻 染 为 一 个 列表 视图 ( 见 图 6-3)。 
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图 6-3. 使 用 部 件 构造 器 可 以 动态 创建 任何 部 件 ， 本 例 中 创建 的 是 列表 视图 


要 将 若干 a 元 素 转换 为 按钮 ， 只 需 调 用 : 
$("a").button(); 
也 可 以 动态 创建 一 个 : 


var button = $("«a»").attr("href", "somewhere.html").button(); 
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6.5.3 更 新 部 件 

我 们 已 经 知道 如 何 动态 创建 jQuery Mobile 部 件 了 ， 不 过 要 修改 一 个 已 经 被 创建 并 
泻 染 的 部 件 的 内 容 该 怎么 办 呢 ?” 例 如 ， 往 一 个 列表 视图 中 添加 元 素 ， 或 改变 一 个 复 
选 框 的 值 。 


这 种 情况 下 需要 刷新 对 应 的 部 件 ， 要 实现 这 一 点 需要 调用 部 件 函 数 并 传 入 字符 串 参 
数 refresh， 例 如 : 


$("flisti").listview("refresh"); 
$("Scheckbox").val("true").checkboxradio ("refresh"); 


回 到 最 后 一 个 例子 ， 如 果 1ist1 一 开始 被 定义 为 一 个 空 1istview， 则 我 们 需要 在 
添加 列表 元 素 后 刷新 这 个 部 件 。 否 则 ， 这 个 列表 元 素 的 界面 将 出 现 这 染 错 


«ul id-"listi"-» 
«/ul» 


添加 元 素 后 ， 可 以 调用 : 


$("#list1").listview("refresh"); 


6.6 创建 网 格 


上 一 章 曾 提 到 有 一 个 可 用 于 创建 CSS 网 格 的 特殊 部 件 。 要 实现 这 个 部 件 ， 需 要 使 用 
一 个 带子 元 素 的 HTML 元 素 ， 并 根据 其 子 元 素 的 数目 将 它 转 换 为 n 列 的 网 格 。 


使 用 时 只 需 调用 jQuery 函数 grid， 例 如 : 





$s ("#element") .grid(); 


根据 它 的 子 元 素 的 数目 ， 框 架 将 自动 为 该 元 素 应 用 正确 的 ui-grid-<letter> 25, 
为 其 子 元 素 应 用 ui-block-<letter> 类 。 


6.7 ”改变 页 面 内 容 


如 果 改 变 了 包含 多 个 部 件 的 一 大 块 HTML， 例 如 使 用 通过 AJAX 请 求 收 到 的 JSON 
数据 创建 了 一 个 包含 各 种 内 容 的 collapsible 元 素 ， 这 时 需要 刷新 整个 容器 。 还 
有 一 个 例子 是 向 一 个 表单 中 添加 了 多 个 input 元 素 ， 希 望 这 些 input 被 转换 为 部 
件 ， 就 像 它们 一 开始 就 在 页 面 中 一 样 。 


要 刷新 一 个 容器 ， 只 需 在 页 面 上 触发 create 事件 ， 这 时 每 个 部 件 就 会 再 次 检查 是 
否 需要 创建 新 的 实例 。 











148 | 第 6 章 


例如 : 


$("#content") .html (newHTMLcontentWithWidgets); 
$ ("#pagel1") .trigger ("create"); 


通常 每 个 部 件 的 构造 器 都 会 响应 页 面 的 create 事件 ， 以 便 检查 是 否 需要 创建 对 应 
的 控件 。 


6.8 ”处 理事 件 


jQuery Mobile 提供 了 一 些 新 的 事件 ， 可 以 使 用 ping 或 live 等 典型 的 jQuery 方法 
来 处 理 。 


6.8.1 页 面 事件 

普通 HTML 页 面 事件 大 家 都 已 经 很 熟悉 了 ， 比 如 由 浏览 器 应 用 到 当前 会 话 的 针对 每 
个 HTTP 页 面 加 载 的 Load 及 DoMready 事件 。jQuery Mobile 框架 中 有 一 些 特别 的 
元 素 可 应 用 事件 。 就 像 我 们 已 经 知道 的 ，jQuery Mobile 文档 有 不 同 的 页 面 (内 部 或 
从 外 部 加 载 ) ， 因 此 必须 认真 地 考虑 jQuery Mobile 页 面 的 加 载 。 


每 个 页 面 CF data-role-"page" 的 元 素 ) 都 有 一 组 不 同 的 事件 ， 这 些 事件 有 一 些 
可 以 全 局 处 理 (同时 处 理 所 有 页 面 )， 有 一 些 则 只 对 某 个 特定 页 面 有 效 。 


要 全 局 处 理 页 面 事 件 ， 可 以 调用 $s (document) .bind， 也 可 以 调用 更 明确 的 
$(":jqmData(role-'page')").bind, HE [EJ live 来 代替 bina, DERESE 
那些 将 来 加 入 到 DOM 中 的 页 面 。 


每 个 页 面 都 有 创建 、 加 载 中 以 及 显示 事件 。 

















1. 创建 事件 
每 个 页 面 都 有 对 应 的 创建 或 初始 化 事件 ， 这 些 事件 如 下 。 


* pagebeforecreate 


页 面 已 插入 DOM， 但 是 组 件 还 未 创建 。 


* pagecreate 


页 面 已 被 创建 ， 但 组 件 还 未 泻 染 。 


* pageinit 


页 面 已 完全 加 载 。 这 应 该 是 页 面 最 常用 的 事件 。 
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* pageremove 


页 面 已 从 DOM 移 除 (通常 这 是 一 个 AJAX 加 载 的 页 面 并 且 当 前 未 激活 ) 。 
例如 ， 可 以 使 用 jQuery 的 Live 方法 绑 定 一 个 pageinit 事件 : 


$ ("#page2").live("pageinit", function(event) ( 


D; 


E a 








记 住 ,使 用 bina 绑 定 事件 时 ， 对 应 的 元 素 必 须 在 DOM 中 存在 。 如 果 对 
Wa. 应 元 素 不 存在 ， 可 以 使 用 live 来 代替 。jQuery 1.7 支持 一 个 新 的 on 函数 ， 
5 但 在 jQuery Mobile 1.0 X jQuery 1.6.4 组 合 中 还 不 可 用 。 











2. 加 载 事 件 

不 是 所 有 页 面 都 会 默认 与 第 一 个 jQuery Mobile 文档 一 起 加 载 ， 对 那些 使 用 AJAX 
加 载 的 页 面 来 说 ， 事 件 处 理 程序 通常 绑 定 在 $ (document) 上 ， 因 为 此 时 对 应 的 页 
面 还 不 在 DOM 中 ， 无 法 绑 定 对 应 处 理 程序 。 


可 用 的 加 载 事 件 有 以 下 这 儿 个 。 











* pagebeforeload 


在 所 有 AJAX 请 求 完 成 之 前 执行 。 


* pageload 
当 新 页 面 已 被 加 载 并 插入 到 DOM 后 执行 。 


* pageloadfailed 
间 定 页 面 无 法 加 载 时 执行 。 


这 些 事件 处 理 程序 都 会 收 到 两 个 参数 ， 一 个 事件 对 象 和 一 个 数据 对 象 。 


第 一 个 参数 是 典型 的 事件 处 理 程序 值 ， 具 有 阻止 默认 行为 的 preventDefault () 方 
法 。 使 用 这 个 方法 ， 可 以 强制 框架 不 显示 默认 的 错误 消息 警告 并 提供 自己 的 UI: 








$(event).bind("pageloadfailed", function(event, data) ( 
data.preventDefault(); 
// 自 定义 错误 管理 

p»: 


第 二 个 参数 是 一 个 包含 不 同属 性 的 对 象 ， 这 些 属 性 如 下 所 示 。 


* url 


HF $.mobile.loadPage 发 起 请 求 的 绝对 或 相对 URL, 
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3. 


absUrl 
绝对 URL, 


dataUrl 


用 作 页 面 标识 的 URL, 


options 
所 有 传 给 $ .mobile.1loadPage 的 选项 ， 例 如 告知 是 GET 还 是 POST 请 求 。 


xhr 


对 应 的 XMLHttpRequest 对 象 ， 用 于 更 底层 操作 。 


textStatus 


用 于 错误 消息 。 





errorThrown 


背 误 异常 对 象 ， 仅 在 pageloadfailed 事件 中 有 效 。 





deferred 

仅 在 pagebe£foreload fl pageloadfailed ¥ fb F, Jf H. WW JH T event. 
preventDefault() 时 有 效 。 这 些 情况 下 ， 必 须 调用 这 个 对 象 的 resolve() 或 
reject () 方法 告诉 框架 如 何 处 理 。 




















Xa 

















事件 。 正 确 的 事件 是 pageinit， 它 在 每 个 页 面 上 都 有 效 。 如 采 在 














«es 如 果 需 要 处 理 页 面 初始 化 ， 应 该 避免 使 用 load, ready X mobileinit 
M 
n 








mobileinit 中 绑 定 它 ， 则 应 该 使 用 1ive 而 不 是 pind。 


显示 事件 


一 个 页 面 可 以 被 初始 化 一 次 ,但 户 可 以 在 页 面 访问 历史 中 前 进 及 后 退 ， 因 此 ， 每 个 
页 面 都 可 以 被 显示 很 多 次 。 这 就 是 为 什么 需要 处 理 页 面 的 显示 及 隐藏 事件 。 


这 些 事件 分 成 页 面 改变 事件 和 过 渡 事 件 。 
有 效 的 页 面 变化 事件 包括 以 下 这 儿 个 。 





pagebeforechange 


在 页 面 改变 发 生 之 前 以 及 过 渡 开 始 之 前 执行 。 


pagechange 
在 页 面 改变 完成 之 后 执行 。 
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pagechangefailed 

页 面 改变 无 法 完成 时 执行 。 

每 个 事件 处 理 程序 接受 两 个 参数 。 
toPage 


如 果 目 标 页 面 是 外 部 页 面 ， 则 值 为 目标 页 面 的 URL 字符 串 ， 如 果 是 内 部 页 面 ， 
则 值 为 目标 页 面 的 DOM 对 象 。 


options 
与 发 送 到 $.mobile.changePage 的 选项 相同 。 


可 用 的 过 渡 事 件 有 以 下 这 儿 个 。 


pagebeforeshow 


在 过 渡 并 显示 页 面 之 前 执行 (页 面 仍然 处 于 隐藏 状态 )。 


pageshow 


在 页 面 已 完成 加 载 过 渡 并 正 显示 在 屏幕 上 时 执行 。 


pagebeforehide 
在 页 面 隐藏 之 前 执行 (页 面 仍然 可 见 )。 


pagehide 
页 面 已 完成 卸载 过 渡 并 已 隐藏 时 执行 。 


每 个 过 渡 事 件 的 处 理 程 序 都 能 收 到 一 个 参数 ， 值 为 相关 页 面 的 jQuery (封装 的 
DOM) 对 象 。 如 果 是 一 个 显示 事件 ， 对 应 的 是 上 一 页 的 对 象 ， 如 果 是 隐藏 事件 ， 对 
应 的 则 是 下 一 页 的 对 象 。 


6.8.2 ”部 件 事件 

每 个 能 动态 显示 或 隐藏 内 容 的 部 件 ， 例 如 collapsible 等 ， 都 会 触发 一 个 
updatelayout 事件 ， 因 为 页 面 布局 已 经 发 生 了 改变 。 有 时 可 能 需要 监听 这 个 事件 ， 
以 便 更 新 UI 上 的 其 他 内 容 。 


6.8.3 方向 事件 

移动 设备 可 以 旋转 ， 因 此 至 少 会 有 两 个 不 同 的 方向 : 纵向 和 横向 。 有 时 我 们 想 在 方 
向 改变 时 也 改变 应 用 的 一 些 外 观 或 行为 。 为 此 ， jQuery Mobile 为 我 们 提供 了 一 个 
orientationchange 事件 ， 可 附加 在 document 上 。 



































目前 有 些 设备 还 没有 原生 支持 orientationchange 事件 ， 在 这 些 设 备 上 jQuery 
Mobile 会 将 它 与 resize 事件 关联 。 一 些 平台 上 ，orientationchange 事件 被 
触发 时 ， 窗 口 框架 仍然 是 原来 的 状态 ， 此 时 将 无 法 取得 正确 的 宽度 及 高 度 值 。 如 
果 想 强制 仅 当 宽度 和 高 度 值 更 新 后 才 甬 发 这 个 事件 ， 可 以 执行 代码 $. mobile. 


orientationChangeEnabled=false。 
这 个 事件 对 应 的 处 理 程序 将 收 到 一 个 字符 串 作 为 第 一 个 参数 ， 值 为 portrait CE 


示 纵 向 ) 或 landscape (表示 横向 )。 无 论 在 什么 平台 上 ， 这 两 个 值 都 是 正确 的 
(没有 上 面 提 到 的 宽度 或 高 度 的 问题 ) : 








$(document).bind("orientationchange", function(orientation) ( 
if (orientation--"landscape") { 
// 现在 是 纵向 
) eise { 
// 现在 是 横向 





} 
D; 
6.8.4 手势 事件 


jQuery Mobile 提供 了 一 些 可 绑 定 在 任何 DOM 元 素 上 的 手势 触摸 事件 。jQuery 
Mobile 1.0 中 提供 的 手势 事件 有 以 下 几 个 。 








* tap 


在 屏幕 上 快速 地 触摸 一 下 时 触发 。 


。 taphold 
用 户 触摸 屏幕 并 持续 按 住 一 秒 钟 时 触发 。 在 显示 上 下 文 菜 单 时 很 有 用 。 


* swipeleft 


用 户 的 手指 从 右 划 到 左 时 触发 。 


* swiperight 
用 户 的 手指 从 左 划 到 右 时 触发 。 


下 面 的 例子 将 把 页 面 的 swiperight 事件 绑 定 到 返回 处 理 











5 
EE 


$(document).bind("mobileinit", function() ( 
$("Àtpage2").live("swiperight", goBackToPagel); 


D; 


function goBackToPagel() ( 
$.mobile.changePage("itpagel", { reverse: true ]); 
$("Àpage2").unbind("swiperight", goBackToPagel); 


) 
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6.8.5 ”虚拟 点 击 事件 
虚拟 点 击 ? 听 起 来 是 不 是 很 奇怪 ? 让 我 们 先 简 单 地 讲解 一 下 。 大 多 数 移 动 浏 览 器 中 ， 
使 用 点 击 事件 (如 click、mouseover) 时 都 有 300-500 毫秒 的 延迟 ， 但 在 使 用 触 
摸 事 件 (如 touchstart、touchmove) 时 就 没有 这 些 延迟 。 另 一 个 问题 是 并 非 所 
有 人 触摸 浏览 器 都 支持 触摸 事件 。 


虚拟 点 击 事件 是 一 个 包装 ， 可 用 于 取代 触摸 或 点 击 事件 ， 基 于 运行 平台 的 不 同 它们 将 
自动 选择 正确 的 事件 。 它 还 标准 化 了 位 置信 息 ， 只 可 用 于 单 点 触摸 〈 非 多 点 触摸 ) 。 


虚拟 点 击 事件 的 用 法 与 点 击 事件 完全 相同 ， 不 过 名 称 中 有 一 个 作为 前 组 。 
jQuery Mobile 中 包括 以 下 虚拟 点 击 事件 : vclick、vmousedown、vmousemove、 


vmouseup 和 vmousecancel。 
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第 7 章 


创建 主题 








jQuery Mobile 允许 开发 者 通过 调整 主题 和 CSS 来 定制 整套 用 户 界面 。 因 为 jQuery 
Mobile 生成 的 是 HTML 和 CSS， 所 以 ， 它 的 每 一 个 样式 都 能 用 CSS 来 覆盖 。 




















图 7-1 展示 了 多 个 不 同 主题 的 jQuery Mobile 站 点 。 如 果 想 要 浏览 更 多 自 定义 界面 的 
站 点 主题 ， 不 妨 看 看 http://jqmgallery.com。 








S penable 


Make a Restaurant Reservation 


8 rooms 2i EA PA 

















D 
/V^ How to Apply © Simple, secure sharing from anywhere 
EB Events. e | Nearby By Location 
-一 一 一 一 一 一 一 *& Scholarships & Bursaries © | a Login 
f& Athletics © 一 一 
-一 | Ə Signup 
Q) Mops & Directions © Tours and Events. © - 
Min ni ci | | dan | J O BoxforiPhone 
R Contact Us. o 回 CU Blogs o| Y — Das 
sa tia | 
| By Name My OpenTable 
X uns e ^ News © 
n C) < EEN E < EA 














图 7-1: jqmgallery.com 展示 了 众多 使 用 jQuery Mobile 创建 的 Web 应 用 ， 其 中 不 过 一 些 与 
标准 主题 相 比 已 经 近 然 不 同 了 的 漂亮 界面 


主题 是 一 组 配色 方案 ， 包 括 : 


。 背景 颜色 和 新 变 ; 
* 字体 。 
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jQuery Mobile 支持 从 字母 a 到 z 至 多 26 个 色 样 定义 。 通 常 ， 我 们 至 少 会 定义 5 个 
不 同 的 色 样 。 


每 个 主题 都 包含 一 个 全 局 定义 ， 适 用 于 主题 内 的 所 有 色 样 ， 它 可 以 定义 如 下 内 容 : 








。 文本 效果 和 盒 效果 ， 例 如 阴影 和 圆 角 ， 
。 按钮 和 其 他 控件 的 激活 状态 。 


使 用 全 局 定义 可 以 确保 无 论 主题 套用 哪个 色 样 都 能 保持 一 致 的 用 户 体 验 。 比 如 ， 在 
默认 主题 里 ， 无 论 按 钮 在 常态 下 被 设置 为 什么 颜色 ， 它 的 选中 状态 始终 显示 为 蓝 色 。 





主题 保存 在 一 个 CSS 文件 中 ， 这 个 CSS 文件 将 与 另 一 个 由 框架 提供 的 描述 文档 结 
构 的 CSS 文件 一 块 被 包含 到 HTML 页 面 中 。 为 避免 和 后 续 版 本 产生 冲突 ， 最 好 不 
要 修改 框架 提供 的 结构 性 CSS 文件 。 如 果 确 实 想 要 覆盖 其 中 的 样式 ， 建 议 男 写 一 个 
CSS 文件 ， 然 后 在 载 入 结构 性 CSS 文件 之 后 再 引入 它 (从 而 实现 样式 的 覆盖 )。 




















| 主题 不 应 该 包括 关于 元 素 大 小 和 位 置信 息 的 定义 。 这 类 信息 应 该 由 结构 性 
ey CSS 来 描述 ， 而 且 ， 除 非 十 分 清楚 自己 在 干什么 ， 否 则 不 要 轻易 修改 这 个 
结构 性 CSS 文件 。 














7.1 ThemeRoller 


创建 主题 最 简单 的 方式 莫 过 于 使 用 免费 的 在 线 工 具 ThemeRoller http://jquerymobile. 
com/themeroller, 用 户 可 以 使 用 右 侧 的 审查 器 (Inspector) 面板 定义 页 面 上 每 个 元 
素 的 颜色 〈 图 7-2) ， 此 外 ， 把 颜色 直接 拖 到 元 素 上 也 可 以 达到 相同 的 效果 。 





z 
er 一 EGET ES 
por m— or pe ome tomme (D Mobo Kersies 
on Tm E 上 /QUerY 


OOo 


D e 











Radio 1 


Rado2 | ^ Radio2 
































& 7-2: 通过 桌面 浏览 器 访问 ThemeRoller 
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ThemeRoller 的 主 窗口 分 成 三 个 窗 格 : 


。 左 侧 的 色 样 选择 器 ， 
。 顶部 的 调 色 板 窗 格 ， 
。 右 侧 的 预览 窗 格 。 





从 顶部 调 色 板 选 中 一 种 颜色 ， 拖 放 到 预览 窗口 中 茶 个 元 素 的 背景 或 者 某 段 文字 上 ， 
目标 元 素 就 会 自动 套用 选中 的 颜色 。 





7.1.1 全 局 设置 


在 左 侧 的 全 局 设 定 标签 页 ( 


字体 ， 





图 7-3) 里 ， 可 以 定义 : 


。 按钮 和 其 他 控件 的 激活 状态 ; 
。 按钮 和 其 他 控件 组 的 圆 角 半径 ， 


。 图 标 属性 ， 


。 SHE. 


可 以 通过 调节 亮度 和 饱和 度 滑 动 条 从 调 色 板 中 获得 更 多 的 颜色 。 











Theme Settings 


FONT | Helvetica, Arial, sans-serif 


TEXT COLOR #fff 
TEXTSHADOW [o — |[-1px | [1px 
BACKGROUND PEIA [—— BS —3 








DEFAULT ICON [we 5) [wn gse +) 
Disc COLOR. PIX] 
DISC OPACITY [40 | 











图 7-3: 全 局 设置 标签 页 








7.1. 色 样 设置 

从 全 局 设置 标签 页 可 以 切换 到 色 样 设 置 标签 页 ， 选 择 一 个 字母 (每 个 字母 代表 一 个 
色 样 ) ， 就 可 以 进行 相应 的 设置 了 (图 7-4)。 可 以 被 定制 的 色 样 内 容 包括 : 

。 页 头 / 页 脚 栏 的 颜色 ， 阴 影 以 及 背景 ; 

。 正文 内 容 的 颜色 和 边框 ; 

。 正常 、 悬 停 以 及 按 下 状态 时 ， 按 钮 的 颜色 和 边框 。 








ThemeRoller 


Global 





Swatch D Delete 


TEXT COLOR PAREA 
TEXT SHADOW |opx 几 1px ||ipx ||&FFFFFF 


BACKGROUND |#EDEDEC [ ——- ZO [«] 


LINK COLOR PG E] 


TEXT COLOR PRA 
TEXT SHADOW Opx | ipx | Opx | #FFFFFF 


BACKGROUND sEsEsES [— ZO [«] 








TEXT COLOR PYY 
TEXT SHADOW [0px |!1px ||ipx 几 #F6F6F6 
BACKGROUND [#F6F6F6 [—— O [«] 

BORDER 4 CCCCCC 











图 7-4: 每 个 字母 都 代表 了 一 整套 对 于 工具 栏 /内 容 /按钮 这 些 元 素 的 颜色 ,效果 和 背景 的 定义 





选择 “+” 标 签 页 ， 可 以 为 主题 增加 新 的 色 样 。 




















设置 背景 色 时 ， 你 也 许 会 注意 到 旁边 有 一 个 小 请 块 。 移 动 清 块 可 以 改变 背 
景色 的 渐变 ， 同 时 右边 的 预览 窗 格 提供 了 实时 预览 。 点 击 滑 块 右 侧 的 加 号 
可 以 进行 更 为 详细 的 渐变 设置 。 















































7.4.8 ”审查 器 


把 顶部 面板 上 的 审查 器 (Inspector) 开关 打开 ， 然 后 在 预览 窗 格 中 点 选 元 素 ， 就 能 
看 到 选中 元 素 的 各 项 属性 显示 在 左 侧 的 色 样 窗 格 里 。 





7.1.4 Adobe Kuler 

Adobe Kuler 是 Adobe 创建 的 一 个 分 享 配色 方案 的 社区 。 人 们 在 社区 里 分 享 自 己 
最 喜爱 的 配色 ， 而 这 些 配色 方案 可 以 通过 http:Wkuler.adobe.com W) ni zx d E — 5 
Creative Suite 应 用 程序 来 进行 浏览 。 





jQuery Mobile 的 ThemeRoller 内 置 Kuler 部 件 (图 7-5), FHP ju Va RS SR HE DC 
里 的 数 千 组 配色 方案 ， 选 中 后 拖 放 到 预览 面板 上 就 可 以 直接 使 用 了 。 



































& 7-5, 从 ThemeRoller 的 顶部 打开 Adobe Kuler， 搜 索 社区 里 精彩 的 配色 方案 


如 果 想 要 从 一 张 图 片 〈 比 方 说 你 的 网 站 logo) 来 获得 配色 方案 ， 可 以 通过 
心 ,  httpZ/kuler.adobe.com 上 传 你 的 图 片 生成 配色 方案 ， 将 它 公 开 ， 这 样 你 就 
4 可 以 从 ThemeRoller 里 搜索 到 它 了 。 


























7.1.5 输出 主题 

完成 主题 的 设计 工作 后 ， 可 以 点 击 网 页 右上 角 的 下 载 主题 按钮 来 导出 主题 。 只 需要 
提供 主题 的 名 字 (图 7-6)， 然 后 就 能 得 到 一 小 段 代 码 ， 复 制 粘 贴 这 段 代 码 到 应 用 中 
就 可 以 套用 这 个 主题 。 如 果 选 择 点 击 下载 Zip 压缩 包 ， 则 会 得 到 一 个 包含 主题 CSS 
(已 经 被 压缩 过 并 且 可 以 直接 调试 的 ) 在 内 的 压缩 包 文 件 。 

















Drag a color onto an element below or in the panel or pick one from the (D Adobe kuler swatches + 
Em CrrrmmNEEC-CSNNECCENEEENECEENE DDH C jQuery 


-|-  LiGHINESS 一 一 @ 一 一 一 SATURATION 





This will generate a Zip file that contains both a compressed (for production) and uncompressed (for editing) version of the 
theme. 
To use your theme, add it to the head of your page after the jquery.mobile.structure file, like this: 
<IDOCTYPE html» 
<html> 
<head> 

<title> query Nope eges title» 

amen": “viewport” entente oiii, E aoii 
sheet" 'themes /my-custom-theme. 
<link a rA Son mobile SA 
ee 
<script sro="http://code. jquery.com/mobile/1. Fe aie TP rod min, ja'»«/script» 


</head> 


1 Tip: To edit your theme later, use the import feature to 
paste in the uncompressed theme file Download Zip 














图 7-6: 要 导出 主题 ， 只 需 为 它 命名 然后 下 载 Zip 压缩 包 文件 即 可 








Aa 
zs 同样 可 以 向 ThemeRoller 导入 主题 ， 这 样 就 可 以 方便 地 通过 Web 界面 对 
a4. 主题 进行 修改 。 选 择 Import 选项 ， 然 后 把 CSS 主题 文件 复制 /粘贴 进去 
UN 即 可 。 


7.2 ”Fireworks 主 题 编辑 器 


Adobe Fireworks 用 户 可 以 很 方便 地 使 用 jQuery Mobile 主题 编辑 器 。 如 果 你 的 
Adobe Fireworks 是 CS5.1 版 本 ， 你 可 以 从 http:Wlabs.adobe.com 下载 一 个 叫做 
“Fireworks CSS3 移动 包 ” 的 免费 插件 '。 


安装 完 插件 包 之 后 ， 打 开 Fireworks 并 且 选 择 Commands > jQuery Mobile > Create 
New Theme， 就 会 见 到 如 图 7-7 所 示 的 一 张 图 片 。 


» a 
^ 如 果 没 有 Adobe Fireworks, "ILIA http://adobe.com/go/fireworks 下 载 一 个 
Wa. 30 天 试用 版 。 
DN 





这 张 图 片 就 像 一 个 同名 的 可 以 修改 的 模板 。 打 开 页 面 面 板 (Windows > Pages) 可 以 
看 到 图 片 被 分 割 成 了 6 个 页 面 (图 7-8)。 





译注 1: Adobe 已 不 再 提供 这 个 包 的 下 载 ，CS6 内 置 了 jQuery Mobile 主题 编辑 器 。 
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(CUECA Filters 


Manage Saved Commands... 
Manage Extensions... 
Run Script... 


AIR Mouse Events 
Batch Commands 
——m rete AR File 
SETS LSE s E Create Slideshow 
— ———— Create Symbol Script 
Creative 
Demo Current Document 
Document 
Flex Skinning 
jQuery Mobile 
Reset Warning Dialogs 
Resize Selected Objects 
z Selection 
CE X 5» « ^" E € Text conveniently located 
Web mobile phone! Learn 
about our oduct: dd them to your 
shopping cart and have them delivered to 
you right away. 


si 


XE 
ene 








fols well 
PNA 











A 
i 
D 


a 


My Account View Cart Search 


Woo be 




























































































图 7-8: 打开 页 面 面 板 ， 可 以 看 到 一 个 全 局 设置 页 以 及 对 应 每 个 色 样 的 设置 页 面 


第 一 页 叫做 全 局 资产 和 样式 ， 用 于 面向 所 有 色 样 的 全 局 样式 和 图 标 设置 (图 7-9). 
还 有 以 字母 a 到 e 进行 命名 的 页 面 ， 用 于 定义 和 改变 各 自 对 应 的 色 样 (图 7-10)。 








创建 主题 | 161 














图 7-9: 全 局 配置 页 允许 用 户 改变 图 标 ， 进 行 全 局 设置 














图 7-10: 以 字母 a 到 z 命名 的 页 面 ， 包 含 各 自 同 名 色 样 的 定义 
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d nno 
后 选择 一 个 合适 的 字母 为 它 命名 ， 比 方 说 ，f。 不 需要 的 色 样 可 以 删除 gos 
PRI aB cA BR. 


我 们 可 以 选择 屏幕 上 的 任意 元 素 并 用 Fireworks 来 修改 ， 可 以 被 修改 的 元 素 属性 
包括 : 

。 文字 颜色 ， 

。 背景 (纯色 或 者 线性 渐变 色 ) ; 

。 字体 样式 和 大 小 ; 

。 阴影 过 滤器 ，; 

。 不 透明 度 ( 透明 度 )。 


在 全 局 设置 页 面 ， 我 们 可 以 定义 的 选项 如 下 。 


。 图 标 : 低 分 辨 率 和 高 分 辩 率 图 标 。 你 可 以 改变 图 标 ， 但 前 提 是 保持 名 字 不 变 ， 比 
如 加 号 的 名 字 是 ui-icon-plus。 

。 激活 按钮 的 样式 。 

。 图 标 背景 : 可 以 改变 它 的 透明 度 。 

。 盒 阴 影 : 可 以 改变 阴影 的 颜色 和 形状 。 

。 控件 组 和 按钮 的 圆 角 半径 : 每 一 个 转角 都 可 被 选中 ， 然 后 通过 更 改 属 性 面板 上 的 














值 来 定义 它 的 弧度 。 
。 各 种 状态 下 的 链接 : 正常 ， 悬 停 ， 激 活 ， 以 及 已 访问 状态 。 
在 色 样 设置 页 面 中 可 以 定义 : 








。 页 头 和 页 脚 区 域 ， 
内 容 区 域 ， 
。 各 种 状态 下 的 按钮 : 正常 ， 悬 停 以 及 按 下 。 





完成 主题 修改 后 ， 可 以 选择 Commands > jQuery Mobile > Preview Theme 来 预览 
主题 。 假使 觉得 还 不 错 ， 可 以 选择 Commands > jQuery Mobile > Export Theme 来 
导出 主题 。 


如 图 7-11 所 示 ， 选 择 Windows > Extensions > jQuery Mobile Theme Preview， 可 
以 打开 jQuery Mobile 预览 面板 。 如 果 改 变 了 当前 页 面 的 色 样 设置 ， 你 得 刷新 之 后 
才能 在 预览 面板 中 看 到 更 新 。 

















JQUERY MOBILE THEME PREVIEW 


Citrus Store 





A sports store that is conveniently located 
near you — on your mobile phone! Learn 
about our products, add them to your 
shopping cart and have them delivered to 


you right away. More.. 




















Qo Qo o 
My Account View Cart Search 
fe) [æ] 











7-11: 打开 jQuery Mobile Theme Preview， 看 看 自 定义 的 主题 在 真正 的 Web 应 用 中 长 
什么 样 儿 


Ya 





如 果 只 是 修改 图 标 图 片 而 不 包括 CSS 文件 ， 可 以 在 jQuery Mobile 主题 预 
心 。 览 面板 找到 一 个 输出 图 片 精灵 (Export Sprite) 的 图 标 。 
ey 
Fireworks 会 把 设计 输出 成 CSS3 文件 ， 包 括 设计 中 的 各 种 渐变 (已 经 自动 为 各 个 浏 
览 器 添加 了 相应 的 前 组 )， 以 及 一 张 汇集 所 有 图 标的 大 图 ， 框 架 会 通过 CSS 图 片 精 
灵 的 方式 从 大 图 上 定位 图 标 。 导 出 操作 需要 一 个 文件 夹 目录 以 及 主题 名 ， 导 出 后 可 
以 得 到 一 个 CSS 文件 和 一 个 图 片 目录 ， 它 们 可 以 被 包含 到 应 用 中 直接 使 用 。 


推荐 将 这 些 文件 保存 成 为 一 个 Fireworks PNG 文件 ， 那 么 下 次 需要 对 主题 进行 微调 
时 就 可 以 直接 使 用 这 个 PNG 文件 ， 而 不 是 从 头 开 始 了 。 



































如 果 打算 使 用 自 定 义 的 主题 CSS， 那 就 需要 在 Web 应 用 中 引入 结构 性 CSS 
一 EE》 文件， 而 不 是 默认 主题 的 CSS。 














7.3 编辑 主题 


题 就 是 一 个 CSS 文件 。 这 意味 着 我 们 可 以 在 任何 一 款 文 本 编辑 器 上 从 头 创 建 或 者 
puel 不 过 ， 要 修改 主题 ， 就 有 必要 了 解 jQuery Mobile 定义 元 素 和 类 的 方式 。 
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jQuery Mobile 使 用 类 来 定义 样式 。HTML 标记 中 的 每 一 个 小 部 件 都 会 被 转换 成 被 若 
F Css 类 所 修饰 的 元 素 。 因 此 ， 用 户 界 面 方面 的 工作 就 是 为 这 些 类 定义 样式 。 








注意 ， 页 面 内 容 区 域 中 的 HTML 代码 不 受 主题 的 约束 。 在 内 容 区 域 里 使 用 
心 。 不 同 于 框架 的 HTML 标记 ， 用 不 同 于 框架 CSS 的 样式 来 进行 修饰 都 没有 




















每 个 类 名 都 有 一 个 ui 前 级 ， 它 的 后 级 是 所 套用 的 色 样 ， 类 似 于 ui-< 名 字 >-< ERE. 
拿 定 义 按钮 来 说 ， 套 用 色 样 a 的 按钮 的 类 名 就 是 ui-btn-a, SHEFE c 的 按钮 就 
是 ui-btn-c。 然 后 ， 对 于 使 用 到 data-theme 或 者 其 他 相关 属性 的 HTML 标记 来 
说 ， 我 们 需要 定义 所 要 套用 的 色 样 。 
表 7-1 展示 了 常见 的 可 以 在 主题 CSS 文件 中 编辑 和 定义 的 类 名 。 


表 7-1; 主题 文件 中 可 以 修改 从 而 定制 用 户 界面 的 类 






































类 名 fü 述 
ui-bar-«x» 页 头 、 页 脚 以 及 其 他 条 栏 
ui-btn-up-«x» 常态 下 的 按钮 
ui-btn-hover-«x» 悬 停 状态 下 的 按钮 
ui-btn-down-«x» 按 下 状态 的 按钮 
ui-btn-active 激活 状态 的 按钮 (适用 所 有 的 色 样 ) 
ui-body-«x» 页 面 内 容 区 
ui-link-«x» 链接 
ui-icon-«x» 按钮 和 其 他 小 部 件 用 到 的 图 标 


























应 用 于 所 有 使 用 到 圆 角 的 控件 

应 用 于 左上 角 / 右 上 角 / 左 下 角 / 右 下 角 的 圆 角 
应 用 于 顶部 /底部 的 圆 角 

应 用 于 左边 / 右边 的 圆 角 

应 用 于 所 有 需要 显示 阴影 的 元 素 

应 用 于 所 有 在 HTML 上 被 禁用 的 元 素 





ui-corner-all 



































ui-corner-«tl/tr/bl/br» 









































ui-corner-«top/bottom-» 








ui-corner-«left/right» 

















ui-shadow 














ui-disabled 

















如 果 想 要 为 相同 类 的 不 同 元 素 ， 比 如 页 头 和 页 脚 (都 使 用 了 相同 的 类 ui- 
Wa. bar)， 提 供 不 同 的 界面 样式 ， 应 该 在 各 自 HTML 标签 里 面 改 变 各 自 所 使 用 
UN 的 色 样 。 



































7.4 定制 页 面 过 渡 


要 定制 页 面 间 的 过 渡 ， 可 以 用 前 面 章节 讲 过 的 JavaScript 的 方式 ， 也 可 以 完全 使 用 
CSS3。 如 果 打 算 使 用 CSS3 动画 ， 就 有 必要 了 解 它 的 工作 原理 。 














假如 data-transition 属性 的 定义 无 法 被 系统 识别 ， 它 会 转 去 寻找 是 否 存在 同名 
的 JavaScript 处 理 程序 。 如 果 还 是 找 不 到 ， 它 会 尝试 应 用 CSS 动画 。 





就 像 是 应 用 CSS 类 名 一 样 ， 我 们 把 过 渡 名 同时 应 用 到 当前 页 和 下 一 页 。in 类 会 应 
用 到 下 一 页 ， 而 out 类 会 应 用 到 当前 页 。 





也 就 是 说 ， 如 果 要 定义 一 个 名 叫 cara 的 过 渡 ， 就 需要 为 .card.in 和 .card.out 
各 定义 一 个 选择 器 。 此 外 ， 你 可 以 选择 定义 一 个 逆向 过 渡 ， 用 于 页 面 返 回 。 为 此 需 
要 添加 相应 的 reverse 类 ， 也 就 是 还 要 定义 .card.in.reverse 和 .card.out. 
reverse, 
a: 我 们 并 不 需要 提供 动画 的 调 速 方法 也 不 需要 提供 动画 的 持续 时 间 ， 因 为 它 
Wa. 们 已 经 在 全 局 的 结构 性 CSS 文件 中 定义 了 。 

DN 
通过 使 用 CSS3 动画 ， 可 以 创建 个 性 化 的 页 面 过 渡 。 卡 片 过 渡 的 方式 类 似 于 幻灯 片 ， 
但 它 的 做 法 是 先 将 所 有 的 页 面 一 层 层 地 又 加 起 来 ， 切 换 到 下 一 张 卡片 时 ， 只 是 移 除 
了 顶部 的 卡片 (当前 页 面 )， 然 后 下 一 页 就 显示 出 来 了 (没有 动画 )。 








.card.out { 
-webkit-transform: translateY(-100%); 
-webkit-animation-name: cardout; 
z-index: 1; /* 在 上 面 */ 

} 





.card.in ( 
-webkit-transform: translateY(0); 
z-index: 0; /* 在 下 面 */ 

} 





@-webkit-keyframes cardout { 
from { 
-webkit-transform: translateY (0%); 
} 


to { 
-webkit-transform: translateY(-1002); 
} 
} 
可 以 把 这 部 分 定义 添加 到 主题 CSS 文件 或 者 另 一 个 单独 的 CSS 文件 中 。 要 用 的 时 
候 ， 只 需 通 过 data-transition JAPE JavaScript 定义 它 就 可 以 了 。 


«a href="#page2" data-role-"button" data-transition-"card"»Page 2</a> 


要 想 让 过 渡 动 画 也 能 在 Android 版 Firefox, Opera 或 者 IE10 上 运行 ， 还 需 分 别 添加 
带 各 浏览 器 专用 前 级 (如 -moz、-o 以 及 -ms) 的 样式 。 








A 
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第 8 和 章 


安装 以 及 离线 访问 








使 用 HTML5 技术 和 其 他 扩展 ， 可 以 让 jQuery Mobile 应 用 和 移动 设备 上 的 原生 应 用 
一 样 完全 离线 运行 。 

此 外 ， 也 可 以 把 jQuery Mobile 应 用 打包 成 一 个 原生 应 用 通过 应 用 商店 发 布 ， 这 在 
后 面 的 章节 会 讲 到 。 在 这 一 章 ， 我 们 将 会 学 习 创 建 一 个 不 通过 应 用 商店 发 布 的 离线 
Web 应 用 。 





使 用 这 种 方案 ， 用 户 可 以 通过 手机 浏览 器 访问 Web 应 用 然后 将 它 安装 到 手机 上 。 那 
么 下 一 次 ， 当 他 通过 同样 的 URL 或 者 应 用 图 标 访问 这 个 应 用 时 ， 应 用 将 不 再 从 服务 
器 端 加 载 ， 而 是 直接 从 本 地 启动。 


8.1 软件 包 定 义 


首先 要 做 的 事情 是 定义 软件 包 。 这 里 我 们 要 用 到 HTMLS 的 一 个 API， 叫 做 应 用 程 
序 缓存 (Application Cache) ， 在 W3C 的 草案 中 也 被 称 为 离线 API (Offline API). 


这 个 API 并 不 是 在 所 有 的 手机 浏览 器 上 都 能 用 ， 但 是 它 兼 容 大 多 数 的 平板 电脑 和 智 
能 手机 。 访 问 http://mobilehtml5.org 可 以 检查 API 当前 的 兼容 性 。 

在 实际 开始 定义 软件 包 前 ， 需 要 明确 目标 。 是 打算 构建 一 个 完全 离线 的 应 用 ， 还 是 
希望 每 次 只 从 服务 器 端 获 得 针对 其 些 页 面 或 者 某 些 数据 的 更 新 ， 又 或 者 只 是 保存 一 
份 离线 的 数据 缓存 ， 而 在 有 网 络 连接 的 情况 下 会 进行 更 新 ? 
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明确 目标 之 后 就 可 以 开始 定义 软件 包 了 。 软 件 包 其 实 是 一 组 文件 ， 是 用 户 访问 应 用 
站 点 时 必须 由 浏览 器 下 载 到 本 地 的 文件 。 这 组 文件 必须 包含 我 们 想 要 离线 访问 的 每 
一 个 资源 ， 比 如 JavaScript. CSS 以 及 图 片 。 我 们 正在 创建 jQuery Mobile 应 用 程序 ， 
因此 需要 把 所 有 的 jQuery Mobile 文件 添加 到 软件 包 中 ， 包 括 CSS 结构 文件 、 主 题 
文件 、 图 片 和 JavaScript 文件 。 





8.1.1 HTML 清 


软件 包 内 的 文件 是 根据 一 个 被 称 为 缓存 清单 (cache manifest) 的 文本 文件 来 发 布 
的 。 清 单 文件 的 第 一 行 必 须 是 CACHE MANIFEST， 随 后 是 所 有 需要 被 下 载 到 设备 上 
的 资源 的 URL 列表 ，URL 可 以 是 相对 路 径 或 者 绝对 路 径 。 


软件 包 内 的 HTML 首页 是 默认 的 ， 并 不 需要 在 清单 内 声明 。 


清单 中 列举 的 文件 是 否 存放 在 同一 服务 器 上 并 不 重要 。 也 就 是 说 ， 我 们 完全 可 以 引 
JH jQuery Mobile CDN( 内 容 分 发 网 络 ) 上 面 的 框架 文件 。 


可 以 在 行 首 使 用 # 做 行 注释 。 





安装 时 ， 清 单 上 的 任 一 文件 下 载 失败 都 会 导致 软件 包 无 效 。 这 意味 着 如 果 
UEM S 将 资源 部 署 在 第 三 方 服务 器 上 ， 应 用 安装 会 依赖 第 三 方 服务 器 。 














举例 来 说 ， 一 个 典型 的 只 包含 一 个 HTML 文档 (没有 外 部 页 面 ) 的 jQuery Mobile 
应 用 清单 看 起 来 应 该 是 这 样 的 : 





CACHE MANIFEST: 


# jQuery 核心 文件 
http://code.jquery.com/jquery-1.6.1.min.js 


# 没有 自 定义 主题 的 jQuery Mobile 文件 
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css 
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js 
http://code.jquery.com/mobile/1.0/images/ajax-loader.png 
http://code.jquery.com/mobile/1.0/images/icons-18-black.png 
http://code.jquery.com/mobile/1.0/images/icons-18-white.png 
http://code.jquery.com/mobile/1.0/images/icons-36-black.png 
http://code.jquery.com/mobile/1.0/images/icons-36-white.png 








# Web 应 用 自 定义 的 文件 ， 路 径 是 相对 于 HTML 文档 的 地 址 
images/logo.png 
data/countries.json 





清单 文件 的 名 字 通 常 叫 offline.appcache， 并 且 只 有 以 text/cache-manifest HJ 
MIME 类 型 提供 给 客户 端 才能 生效 。 如 果 不 知 道 如 何 设置 MTIME 类 型 ， 你 应 该 联系 服 





A 
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务 器 管理 员 。 


如 果 服 务 器 支持 PHP， 那 么 只 需要 把 文件 的 扩展 名 改 成 .php， 然 后 使 用 下 面 这 个 模 
版 ， 不 需要 其 他 特殊 配置 就 能 生效 了 : 





«?php header('Content-Type: text/cache-manifest'); 
?»CACHE MANIFEST: 








下 一 步 需 要 在 HTML 文件 中 定义 清单 文件 的 URL， 这 是 通过 设置 html 元 素 的 
manifest 属性 来 完成 的 ， 这 也 是 HrML5 新 引入 的 一 个 属性 。 











«html manifest="offline.appcache"> 
<-- 应 用 的 正文 --> 
</html> 


8.1.2 ”下载 应 用 

支持 应 用 缓存 的 浏览 器 找到 清单 声明 后 ， 就 会 在 后 台 下 载 清 单 文 件 。 如 果 清 单 文件 
有 效 并 且 MIME 类 型 也 有 效 ， 它 就 会 启动 Web 应 用 的 下 载 进程 。 

后 台 的 下 载 进 程 和 正常 的 页 面 加 载 是 完全 分 开 的 。 下 载 进 程 会 把 清单 里 面 的 每 一 个 
文件 都 下 载 下 来 ， 保 存在 设备 上 一 个 只 有 它 自己 可 以 访问 的 地 方 。 








只 要 有 一 个 资源 没有 下 载 成 功 (资源 不 存在 或 者 服务 器 宕 机 )， 那 么 整个 
ERAS 软件 包 都 将 无 效 ， 所 有 的 资源 都 不 会 被 保存 在 本 地 。 














如 果 软 件 包 安装 成 功 ， 那 么 下 一 次 用 户 访问 相同 URL 时 ， 浏 览 器 就 会 加 载 应 用 的 本 
地 版 本 ， 而 不 再 去 访问 服务 器 端 。 即 使 用 户 连 上 网 络 ， 浏 览 器 也 会 自动 地 切换 到 离 
线 状态 。 也 就 是 说 ， 在 默认 情况 下 ， 我 们 不 能 访问 以 前 没有 在 清单 文件 中 声明 需要 
连 线 访问 的 资源 。 

如 果 软 件 包 没 有 安装 成 功 ， 页 面 下 一 次 会 重新 从 Web 服务 器 加 载 。 软 件 包 没有 安装 
成 功 的 原因 可 能 是 : 

。 清单 文件 无 效 ， 不 存在 ， 或 者 MIME 类 型 错误 ， 

。 至 少 有 一 个 清单 中 列举 的 资源 无 法 被 访问 到 ， 

。 在 所 有 的 资源 被 正确 地 下 载 到 本 地 之 前 ， 用 户 退 出 了 浏览 器 或 者 网 页 。 


使 用 调试 工具 可 以 查看 软件 包 里 包含 的 内 容 。 针 对 iOS 模拟 器 ， 可 以 下 载 免费 的 工 
具 iWebInspector， 在 “资源 ”选项 卡 里 能 找到 应 用 程序 的 缓存 信息 (图 8-1)。 
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iWebinspector | Remote Web Inspector & Debugger for iOS Simulator - by @firt 





http: -google.com.ar/images/nav logo86.png 
http:/ /www.google.com/images /nycli1.gif 
http://www.google.com/images/srpr/logo3w.png 























图 8-1; iWeblnspector 的 “资源 ”选项 卡 展示 了 应 用 缓存 了 的 软件 包 内 容 


一 样 地 访问 它 就 可 以 了 ， 即 仍然 使 用 与 之 前 在 清单 中 定义 的 相同 的 URL 路 


要 访问 应 用 下 载 的 本 地 资源 ， 并 不 需要 修改 代码 。 只 需要 像 访 问 在 线 资源 
径 (相对 地 址 或 者 绝对 地 址 ) 。 浏 览 器 将 智能 地 加 载 指定 文件 的 本 地 版 本 。 





8.1.3 访问 在 线 资 


MR pu 肖 内 ， 所 以 无 法 访问 先前 没有 在 清单 中 定义 的 资 
源 。 如 果 清 楚 地 知道 需要 从 网 上 获取 哪些 信息 ， 可 以 在 清单 文件 中 定义 一 个 专门 的 
NETWORK: 段落 。 默 认 情 况 下 ， 所 有 的 资源 都 定义 在 无 需 显 式 声 明 的 caAcHE : 段落 
内 。 段 落 是 以 冒号 结尾 的 一 行 。 如 果 和 希望 每 次 都 从 服务 器 端 获取 countries.json X 
件 ， 可 以 把 清单 改 成 : 


CACHE MANIFEST: 


& jQuery 核心 文件 
http://code.jquery.com/jquery-1.6.1.min.js 


# 没有 自 定义 主题 的 jQuery Mobile XF 
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css 
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js 
http://code.jquery.com/mobile/1.0/images/ajax-loader.png 
http://code.jquery.com/mobile/1.0/images/icons-18-black.png 
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http://code.jquery.com/mobile/1.0/images/icons-18-white.png 
http://code.jquery.com/mobile/1.0/images/icons-36-black.png 
http://code.jquery.com/mobile/1.0/images/icons-36-white.png 

















4 Web 应 用 自 定义 的 文件 ， 路 径 是 相对 于 HTML 文档 的 地 址 
images/logo.png 

















# 需要 每 次 都 从 网 络 上 获取 的 资源 
NETWORK: 
data/countries.json 


这 样 ，countries.json 就 不 会 被 下 载 到 本 地 ， 而 是 每 次 都 从 服务 器 端 获 取 。 没 有 连 网 
时 ， 这 个 文件 就 访问 不 到 了 ， 除 韭 浏 览 器 保存 了 一 份 缓存 ( 指 传 统 的 浏览 器 缓存 ， 
而 不 是 应 用 缓存 )。 




















uw ga online 和 offline。 查 询 window.onLine 这 个 布尔 类 型 的 属性 ， 可 以 知 
道 当 前 是 否 有 互联 网 连接 。 








对 于 支持 离线 API 的 浏览 器 ， 有 两 个 新 增 的 可 以 操作 文档 对 象 的 事件 : 
As 
t 

4 





清单 中 的 NETWORK 段落 支持 使 用 通配符 * 或 者 文件 夹 的 资源 描述 方式 。 如 果 使 用 文 
件 夹 ， 那 么 在 离线 模式 下 ， 指 定 文件 夹 下 的 所 有 资源 都 会 从 网 上 获取 。 


如 果 和 希望 离线 应 用 中 的 所 有 资源 在 有 网 络 连接 的 时 候 都 从 网 络 上 获取 ， 可 以 这 样 
定义 : 





NETWORK: 


* 


应 用 这 个 配置 的 话 ， 就 只 有 在 NETWORK: 段落 前 声明 的 文件 才 会 从 离线 软件 包 中 加 
载 ， 其 他 的 所 有 资源 都 会 从 网 络 上 获取 。 


清单 文件 也 支持 FALLBACK: 段落 的 定义 ， 这 块 内 容 不 在 书 中 详细 介绍 了 。 
心 . 简单 来 说 ， 它 用 于 为 网 络 资源 定义 备用 URL， 在 没有 互联 网 连接 的 情况 下 
U^ 会 重 定向 到 备用 URL, 





























8.1.4 更 新 资源 

之 前 说 到 在 软件 包 安 装 之 后 ， 所 有 的 资源 (包括 HTML 首页 ) 都 只 会 从 本 地 存储 而 
不 是 服务 器 端 进行 加 载 。 很 自然 地 ， 人 们 会 问 : 如 何 更 新 资源 呢 ? 如 果 想 要 更 新 主 
题 CSS 文件 ， 改 一 张 图 片 ， 或 者 在 HTML 文档 中 加 入 一 个 新 的 页 面 链接 ， 要 怎么 
做 呢 ? 
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好 吧 ， 我 得 承认 之 前 说 的 “应 用 第 二 次 启动 时 会 完全 从 本 地 加 载 资源 ”这 人 句 话 不 完 

全 对 ,或 者 说 遗漏 了 一 些 什 么 。 嗯 ， 确 实 忽略 了 一 些 情况 。 当 用 户 第 二 次 (包括 以 

后 ) 打开 Web 应 用 时 ， 应 用 总 是 从 本 地 存储 进行 加 载 ， 但 同时 浏览 器 会 在 后 台 进 程 
尝试 从 服务 器 端 获 取 最 新 的 清单 文件 ! 


如 果 没 有 互联 网 连接 ， 那 便 什么 都 不 会 发 生 ， 用 户 始 终 使 用 的 是 本 地 版 本 。 如 果 网 
络 连 接 可 用 ， 浏 览 器 就 会 比较 刚 从 服务 器 下 载 的 新 清单 文件 和 之 前 随 Web 应 用 一 
起 下 载 到 本 地 的 旧 清 单 文件 一 一 它 可 是 逐 字 节 地 进行 比较 。 只 要 有 一 个 字 节 改变 了 ， 
之 前 的 清单 就 失效 了 ， 它 就 会 根据 新 的 清单 文件 把 每 个 资源 重新 下 载 一 遍 。 


再 把 上 面 那 段 重 新 看 一 遍 ， 看 完了 ? 好 ， 我 们 再 来 详细 解释 一 下 。 如 果 一 个 CSS X 
件 的 内 容 发 生 了 改变 ， 而 文件 名 保持 不 变 ， 那 么 清单 文件 也 不 会 改变 。 因 此 ， 已 经 
下 载 的 文件 不 会 进行 任何 更 新 。 所 以 ， 在 这 种 情况 下 ， 一 定 要 修改 清单 文件 ， 才 能 
确保 浏览 器 下 载 新 文件 。 


因 文件 需要 更 新 而 修改 清单 的 方式 包括 增加 空格 、 修 改 资源 的 名 字 (加 上 版 本 信 
息 )， 其 至 可 以 是 增加 一 行 注释 、 包 含 一 个 随机 数 或 者 最 后 修改 时 间 ， 例 如 : 














CACHE MANIFEST 
# webapp updated 2012-01-01 


哪怕 只 有 一 个 字 节 发 生 改 变 (比如 日 期 )， 旧 的 清单 就 会 失效 ， 浏 览 器 就 会 重新 下 载 
所 有 的 文件 。 是 的 ， 所 有 文件 。 离 线 缓存 API 不 支持 单个 文件 更 新 ! 





配合 Web 存储 API 来 使 用 应 用 缓存 ， 可 以 建立 一 种 只 下 载 部 分 资源 ( 比 
WS a. 如 CSS、JavaScript， 或 者 图 片 ) 到 本 地 而 无 需 重新 加 载 整个 Web 应 用 的 
Uh 机 制 。 























清单 更 新 过 程 中 还 有 另 一 个 让 人 不 快 的 地 方 : 如 果 发 现 有 更 新 ， 浏 览 器 会 重新 下 载 
清单 中 的 所 有 资产。 然而， 这 个 下 载 是 在 后 台 进 程 中 完成 的 ， 此 时 以 前 的 文件 还 显 
示 在 屏幕 上 。 因 此 ， 就 算是 有 更 新 ， 如 果 用 户 不 重新 启动 应 用 ， 他 看 到 的 仍然 是 老 
版 本 。 下 次 启动 的 时 候 ， 安 装 包 已 经 改变 ， 才 会 加 载 新 的 资源 。 


这 意味 着 如 果 清 单 发 生 了 改变 ， 加 载 页 面 两 次 才能 用 上 新 的 版 本 。 这 个 问题 可 以 用 
事件 机 制 来 解决 。 











8.1.5 ” JavaScript 对 象 


有 一 个 全 局 JavaScript 对 象 可 以 帮助 我 们 了 解 应 用 缓存 的 状态 。 这 个 对 象 叫 做 
applicationCache， 它 的 status 属性 值 可 以 参考 表 8-1。 
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表 8-1: applicationCache.status 属 性 的 值 






































值 常 & 描 R 

0 UNCACHED 页 面 第 一 次 加 载 ， 或 者 没有 可 用 的 清单 文件 

1 IDLE 缓存 闲置 1 

2 CHECKING 本 地 清单 文件 正在 比 对 服务 器 端的 清单 文件 进行 检查 
3 DOWNLOADING 资源 下 载 中 (第 一 次 或 者 升级 ) 

4 UPDATEREADY 有 更 新 已 经 被 下 载 ， 但 要 到 下 一 次 加 载 时 才 生 效 














要 兼容 所 有 的 浏览 器 ， 需 要 先 检 查 applicationCache 对 象 是 否 可 用 : 


if (window.applicationCache!-undefined) { 
// 浏览 器 支持 applicationCache 的 使 用 








可 以 通过 常量 比较 来 查询 当前 状态 ， 例 如 : 


if (window.applicationCache!-undefined) { 
// 浏览 器 支持 applicationCache 的 使 用 
if (applicationCache.status--applicationCache.UPDATEREADY) ( 


// 有 更 新 等 待 重 加 载 后 生效 
} 














} 


applicationCache 对 象 包含 update() 方 法 (强制 发 起 更 新 检查 ) 和 
Mr ME ) 方法 (从 旧 的 资源 缓存 切换 到 新 的 资源 ， 前 提 是 新 资源 已 经 下 载 完 

毕 )。 不 过 , 已 经 加 载 的 HTML 文档 和 资源 只 有 调用 nistory.reloaa(0 进行 一 次 
完全 重 载 后 才能 真正 生效 。 


8.1.6 事件 


applicationCache 对 象 支持 多 种 事件 ， 通 过 处 理 这 些 事 件 可 以 帮助 我 们 管理 各 种 
场景 。 例 如 ， 当 用 户 第 一 次 访问 网 站 时 ， 可 以 显示 一 个 “正在 下 载 ” 的 消息 直到 资 
源 下 载 完 毕 ， 这 样 用 户 就 会 等 待 ， 完 成 下 载 的 几率 就 会 增加 。 


X 8-2 列举 了 applicationCache 对 象 上 可 以 绑 定 的 事件 。 


表 8-2: 可 以 绑 定 处 理 程 序 的 applicationCache 对 象 事件 
事件 名 触发 时 机 

checking 浏览 器 正在 检查 清单 文件 

downloading | 浏览 器 开始 下 载 清单 文件 上 的 资源 

progress 其 中 一 个 资源 下 载 完毕 (每 个 资源 下 载 完 后 都 会 触发 ， 因 此 可 以 据 以 创建 下 载 进度 条 ) 




























































































译注 1， 所 有 的 缓存 文件 已 经 保存 人 缓存。 














安装 以 及 离线 访问 | 173 














事件 名 触发 时 机 
cached 第 一 次 下 载 已 经 顺利 完成 
noupdate 和 服务 器 端 清单 文件 比较 后 发 现 没 有 可 用 的 更 新 

















updateready | 存在 可 用 的 更 新 ， 并 且 新 的 资源 文件 已 经 下 载 完毕 ， 重 新 加 载 后 生效 
error 下 载 资源 过 程 重出 现 错误 
obsolete 检查 更 新 后 ， 本 地 清单 文件 失效 ，web 应 用 从 本 次 存储 中 删除 ， 下 一 次 不 再 进行 离线 访问 





























在 常见 的 场景 下 ， 开 发 者 需要 : 


。 捕获 downloading 事件 ， 以 便 向 用 户 显示 下 载 消 息 , 额外 地 还 可 以 提供 一 个 旋 
转 着 的 下 载 动画 ，; 

。 捕获 progress 事件 ， 制 作 一 个 进度 条 ， 见 图 8-2; 

。 捕获 cached 事件 ， 隐 藏 下 载 信息 并 告知 用 户 应 用 已 经 安装 完毕 ; 

。 捕获 error 事件 ， 隐 藏 下 载 信 息 并 告知 用 户 错误 原 因 

。 捕获 updateready 事件 ， 通 知 用 户 应 用 更 新 已 经 准备 完毕 ， 并 征询 用 户 是 否 要 
马上 重新 加 载 以 访问 新 版 的 应 用 。 




















dE AR [ato oa 


We live in FINANCIAL TIMES" 











8-2; 下 载 过 程 中 的 《金融 时 报 》iPad 版 应 用 程序 (app.ft.com) 
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可 以 使 用 aadqagventListenez 方 法 来 进行 事件 绑 定 ， 例 如 ; 


if (window.applicationCache!-undefined) { 
// 浏览 器 支持 applicationCache 的 使 用 
applicationCache.addEventListener('updateready', function() { 
// 有 更 新 等 待 重 加 载 后 生效 
if (confirm(" 更 新 已 经 准备 就 绪 ， 是 否 要 立刻 重新 加 载 ?") ) { 
history.reload(); 
) 


p: 

















8.2 ”安装 应 用 图 标 


应 用 下 载 完 毕 后 ， 可 以 引导 用 户 将 应 用 图 标 添加 到 主屏 幕 或 者 应 用 菜单 上 。 这 样 
用 户 就 可 以 通过 图 标 直接 访问 Web 应 用 ， 无 需 重新 键入 应 用 的 URL 了 。 对 于 普通 
用 户 来 说 ， 在 浏览 器 地 址 栏 输入 URL 来 打开 一 个 离线 应 用 ( 那 种 在 坐 飞 机 时 还 能 使 
用 的 应 用 ) 是 不 可 思议 的 。 


即使 没有 清单 文件 (未 启用 应 用 缓存 )， 用 户 也 可 以 添加 一 个 图 标 快捷 方式 到 主屏 幕 
上 。 在 这 种 情况 下 ， 图 标 只 是 用 户 访问 在 线 Web 应 用 的 一 个 快捷 方式 。 





» 








引导 用 户 将 Web 应 用 快捷 方式 添加 到 浏览 器 书签 中 是 另 一 种 方案 。 不 过 ， 
心 在 移动 应 用 的 领域 ， 大 部 分 用 户 更 普遍 地 选择 安装 桌面 图 标 而 不 是 加 入 浏 
览 n 器 书签 。 


























目前 还 没有 哪 一 个 平台 支持 自动 的 应 用 图 标 安装 ， 因 此 需要 在 屏幕 上 提供 指引 ，3 
导 用 户 自己 安装 。 





8.2.1 引导 
可 以 通过 不 同 的 方式 引导 用 户 将 应 用 快捷 方式 添加 到 主屏 幕 上 。YouTube、Google 
Maps 和 Facebook 在 iOS 上 都 通过 如 图 8-3 所 示 的 浮动 aiv 来 进行 引导 。 


通常 应 用 会 将 是 否 已 经 对 用 户 进 行 过 引导 的 记录 保存 在 cookie 或 者 HTMLS 
localStorage 中 ， 确 保 用 户 只 会 被 引导 一 次 。 
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S — - Google Chrome: Jorge, 
voluntario 












by GoogleArgentina 
n KE. from Spotlight Videos 

TRIBUTE SOCRATES 

BRAZIL BRASIL 1982 


by justlikethischan... 
from Top Favorited 


[FMS] Love Is Gone 


by MagalynAMV 
from Top Favorited 











8-3: 不 少 移动 站 点 通过 气泡 提示 的 方式 引导 用 户 将 应 用 程序 快捷 图 标 添加 到 主屏 幕 


8.2.2 图标 快捷 方式 名 


应 用 图 标 有 一 个 对 应 的 名 字 ， 在 某 些 平台 会 显示 在 主屏 幕 上 【图 








8-4) , 在 另 一 些 平 





台 则 会 显示 在 应 用 菜单 上 (图 8-5) 。 图 标 下 方 名 字 的 默认 值 是 HTML 页 面 的 title 
元 素 的 值 。 如 果 打 算 引 导 用 户 安装 应 用 快捷 方式 ， 那 么 有 必要 保持 title 的 简洁 


(只 用 一 两 个 词 ) 以 适应 屏幕 的 大 小 。 
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Cancel Add to Home Add 





alwlslalrlvlullole 
A|s|p]rjc]H]»]k]t 
uz ixicivis|N| v 


return 








-?123 





8-4: 在 iOS 上 用 户 可 以 将 应 用 快捷 方式 添加 到 主屏 幕 上 








Shortcut to this website will be added to 
your home screen 











8-5. 和 Android 手机 以 及 iPhone —ł¥, Nokia N9 也 可 以 将 应 用 快捷 方式 添加 到 主屏 幕 上 
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用 作 应 用 名 。 








图 8-6 展示 了 在 不 同 平 台 上 ， 如 何 将 Web 应 用 添加 到 主屏 幕 


对 于 jQuery Mobile 应 用 来 说 ， 如 果 用 户 在 首页 之 外 的 页 面 (无 论 是 应 用 内 
ED 部 还 是 外 部 的 页 面 ) 上 添加 应 用 快捷 方式 到 主屏 幕 或 者 应 用 菜单 上， 那么 
应 用 快捷 方式 会 指向 当前 页 而 不 是 首页 ， 当 前 页 的 aata-title 属性 会 被 








Hr Bookmark this page 


Label YouTube 


Account Local 


Share this page 


Add to home screen Cancel 


Cancel 









Address http://m.youtube.con 


Add to Vi Bookmarks 
会 Home Screen 
Fi Bookmarks 


Open new window lig Other folder 





图 8-6: 在 各 种 平台 上 添加 应 用 快捷 方式 到 主屏 幕 或 者 应 用 菜单 上 的 菜单 


8.2.8 图 标定 义 


传统 网 页 通过 favicon link 元 素 指 定 rel-"icon" 或 者 rel="shortcut" 来 定义 





图 标 。 所 有 的 浏览 器 都 支持 这 种 定义 方式 。 


«link rel-"icon" type-"image/png" href-"favicon.png" /> 


«link rel-"shortcut icon" type-"image/png" href-"favicon.png" /> 





这 种 方式 定义 的 图 标 存在 一 个 问题 ， 即 相 比 智能 手机 和 平板 电脑 主屏 上 的 图 标 ， 它 


们 显得 太 小 了 。 它 们 起 初 使 用 的 是 ICO 格式 (16 x 16 像素 大 小 的 位 图 图 





R), 现在 


也 支持 其 他 格式 ， 比 如 PNG， 但 是 通常 都 不 大 (最 大 也 不 过 32 x 32 像素 )。 这 就 是 
为 什么 这 些 图 标 通常 不 被 用 作 应 用 程序 快捷 方式 图 标 ， 即 使 用 上 了 ， 也 只 是 出 现在 








实际 图 标的 一 个 角落 。 











如 果 平 台 不 支持 主屏 幕 图 标 快捷 方式 ， 那 么 可 以 将 jQuery Mobile 应 用 打包 
Wa. 成 混合 应 用 (比如 使 用 PhoneGap)， 然 后 作为 原生 应 用 在 自己 的 网 站 或 者 
U^ 应 用 商店 上 发 布 。 这 在 后 面 几 章 会 讲 到 。 





























除了 上 面 说 的 ， 图 标的 定义 没有 其 他 的 标准 了 。 不 过 ， 苹 果 的 iog8 为 它们 自己 的 图 
标定 义 了 一 个 meta 标签 ， 其 他 的 平台 现在 也 能 使 用 它 ， 比 如 Android 和 MeeGo 1.2 
上 的 浏览 器 (Nokia N9 的 浏览 器 )。 作 为 应 用 开发 者 ， 我 们 应 该 提供 尽 可 能 多 的 图 
标 ， 以 便 各 个 平台 使 用 各 自 支持 的 那个 图 标 。 如 果 平 台 没 有 找到 它 所 支持 的 图 标 ， 
那么 通常 它 会 使 用 标准 的 快捷 方式 图 标 或 者 网 页 左上 角 的 截图 一 一 那个 地 方 通常 用 
来 显示 网 站 微 标 。 

作为 事实 上 的 标准 ， 苹 果 定 义 的 也 是 一 个 1ink 标签 ， 指 定 rel-"apple-touch- 


icon" 或 者 rel-"apple-touch-icon-precomposed", [f] sizes 属性 是 可 选 的 。 


默认 情况 下 ， 侠 果 会 为 每 一 个 指定 rel="apple-touch-icon" 的 图 标 应 用 圆 角 、 
阴影 和 3D 发光 效 果 。 如 果 不 想 启用 阴影 和 3D 发 光 效 果 (比如 说 一 些 透 明 的 图 标 )， 
那么 可 以 设置 rel="apple-touch-icon-precomposed"。 





























lin 























Android 浏览 器 只 支持 rel-"apple-touch-icon-precomposed", EPS 2 Eb 
添加 任何 视觉 效果 。 


可 以 为 不 同 平台 提供 不 同 大 小 的 图 标 。 如 果 只 提供 一 个 图 标 ， 它 会 根据 不 同 的 平台 
缩放 ， 效 果 可 能 不 佳 。 比 较 好 的 做 法 是 在 网 页 内 定义 多 个 不 同 尺寸 (使 用 sizes 属 
性 ) 的 link 元 素 ， 比 如 sizes="57x57"。 图 标 格式 方面 ，PNG 是 首选 。 


表 8-3 展示 了 各 平台 的 图 标尺 寸 。 
表 8-3: 各 平台 主屏 幕 图 标的 尺寸 
































平台 尺寸 rel 属 性 sizes 属 性 
iPhone3、3GS、iPod 57x7 apple-touch-icon fll apple-touch- | M iOS 4.2 开始 支持 
Touch 1-3 icon-precomposed 
iPhone4, 4S, iPod 114x 114 apple-touch-icon 和 apple-touch- | A iOS 4.2 开始 支持 
Touch 4 icon-precomposed 
iPad 1, 2 72x72 apple-touch-icon fll apple-touch- | M iOS 42 开始 支持 

icon-precomposed 
Android 浏览 器 任何 尺寸 apple-touch-icon-precomposed 不 支持 
Nokia N9 浏览 器 80 x 80 apple-touch-icon 支持 











Android 浏览 器 不 支持 sizes 属性 ， 已 经 定义 的 会 被 忽略 。 如 果 存 在 多 个 ，Android 
会 使 用 最 后 一 个 定义 rel="apple-touch-icon-precomposed" 的 那个 图 标 。 如 
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果 希 望 iOS 忽略 供 Android 浏览 器 使 用 的 图 标 ， 可 以 为 链接 元 素 提 供 一 个 无 效 的 
sizes 属性 ， 比 如 : sizes="android-only"。 











[| 低 于 42 版 本 的 i0S 设备 不 支持 sizes 属性 ， 如 果 定 义 了 多 个 不 同 尺 二 的 
EM 图 标 ， 就 会 使 用 最 后 定义 的 那个 。 较 好 的 做 法 是 把 尺寸 较 小 的 图 标 放 在 后 
^ WOES. 


























因此 ， 可 以 预先 在 好 所 有 需要 用 到 尺寸 的 图 标 ， 然 后 在 head 元 素 内 使 用 下 面 的 这 
段 代 码 来 提供 所 有 可 能 需要 的 图 标 : 

















«link rel-"icon" href="icons/icon32.png"> 
«link rel-"shortcut icon" href-"icons/icon32.png"» 


«link rel-"apple-touch-icon" href-"icons/icon57.png" sizesz"57x57"» 

«link rel-"apple-touch-icon" href-"icons/iconll4.png" sizes-"114x114"- 

«link rel-"apple-touch-icon" href-"icons/icon72.png" sizes-z"72x72"» 

«link rel-"apple-touch-icon" sizes-"80x80" href-"icons/icon80.png"» 

«link rel-"apple-touch-icon-precomposed" sizes-"android-only" href- 
"icons/icon57.png"» 


图 8-7 展示 了 我 们 的 应 用 在 不 同 平台 主屏 上 的 图 标 。 




















8-7: 为 不 同 平台 的 主屏 以 及 程序 菜单 应 用 不 同 尺寸 的 图 标 


8.3 ”全屏 


在 ( 且 仅 在 ) iOS 平 台 上 (包括 iPhone 和 iPad)， 可 以 进一步 定制 我 们 的 Web 应 
用 。 我 们 可 以 创建 一 个 没有 边框 的 全 屏 应 用 ， 看 不 见 任何 的 Safari 控件 ( 既 没 有 地 
址 栏 也 没有 工具 条 )。 不 过 ， 全 屏 显 示 要 求 用 户 必 须 从 主屏 幕 上 启动 应 用 程序 ， 并 且 
在 HTML 页 面 上 定义 这 样 一 个 meta 标签 : 





























«meta name-"apple-mobile-web-app-capable" content-"yes"- 


然后 ， 当 用 户 打开 页 面 时 ， 就 会 看 到 一 个 完 完全 全 的 全 屏 应 用 (图 8-8) ， 此 时 ， 有 
必要 在 界面 上 提供 一 个 显 式 的 后 退 按钮 。 
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图 8-8: 一 个 jQuery Mobile 程序 在 iPhone/iPad 上 以 全 屏 应 用 的 方式 打开 











8.3.1 全 屏 检测 

iOS 平台 上 ， 可 以 通过 navigator.standalone 属性 强制 程序 全 屏 运 行 。 如 果 
个 属性 可 以 被 读 到 且 值 为 false， 意 味 着 用 户 是 通过 Safari 访问 应 用 程序 ， 如 果 

Piin 则 应 用 是 从 主屏 幕 上 的 快捷 图 标 启动 的 。 





顺 着 这 个 思路 ， 我 们 可 以 强制 应 用 在 全 屏 下 进行 安装 和 使 用 。 安装 之 后 ， 用 户 
无 法 从 视觉 上 区 分 从 App Store 上 下 载 的 原生 应 用 和 我 们 的 全 屏 en 


比方 说 ， 可 以 用 一 个 特殊 的 jQuery Mobile 页 面 引 导 用 户 从 主屏 幕 菜单 上 安装 和 使 
用 我 们 的 Web 应 用 : 


if (navigator.standalone!-undefined) { 
// Æ ios 平台 
if (!navigator.standalone) { 
// 运行 在 Sa£ari 浏览 器 上 
$.mobile.changePage ($ ("#install"), {transition: "none"]); 


) 
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将 上 面 这 段 代码 放 到 mobileinit 中 ， 用 户 从 Safari 访问 Web 应 用 时 ， 就 会 被 重 定 
向 到 安装 页 面 而 不 是 直接 进入 当前 页 面 。 如 果 用 户 是 从 主屏 幕 菜单 访问 ， 那 么 他 就 
可 以 直接 进入 jQuery Mobile 的 初始 化 页 面 。 








8.3.2 ”修饰 Web 应 用 


Apple 提供 了 一 些 meta 标签 用 来 修改 Web 应 用 的 样式 。 首 先是 (屏幕 的 顶部 ) 状态 
栏 的 颜色 ， 可 以 通过 定义 apple-mobile-web-app-status-bar-style 这 这 个 meta 
标签 来 修改 ， 它 的 值 可 以 是 default (灰色 )、black X black-translucent, K 
中 black-translucent 是 一 个 透明 的 黑色 区 域 ， 它 会 显示 一 部 分 的 应 用 标题 颜色 。 
图 8-9 展示 了 实际 应 用 中 的 三 种 状态 栏 颜色 。 

















«meta name-"apple-mobile-web-app-status-bar-style" content-"black"- 
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图 8-9: 应 用 在 同一 页 面 上 的 不 同 状态 条 样式 












































全 部 高 度 。 也 就 是 说 ， 状 态 栏 会 悬浮 在 页 面 上 方 。 如 果 不 使 用 国定 的 工具 
栏 并 且 没 有 在 顶部 留 下 20 像素 的 空间 ， 那 么 用 户 体验 就 会 很 糟糕 。 














如 果 使 用 black-translucent 样式 的 状态 栏 ， 应 用 就 可 以 占据 浏览 器 的 
E 









































全 局 应 用 另 一 个 可 以 定制 的 地 方 是 启动 图 片 。 启 动 图 片 是 提供 给 操作 系统 用 来 在 程 
序 启 动 的 动画 中 显示 的 图 片 ， 如 图 8-10 所 示 。 
































8-10: 启动 图 片 用 在 打开 程序 时 所 显示 的 动画 中 














启动 图 片 可 以 通过 指定 de d touch-startup-image" 的 link 元 素来 定 
义 ， 它 的 尺寸 依赖 于 运行 的 平台 能 是 : 


。 所 有 的 iPhone/iPod: 320 x 460 像素 ; 
。 所 有 的 iPad 竖 屏 应 用 : 768 x 1004 像素 ; 
。 所 有 的 iPad 横 屏 应 用 : 1024 x 748 像素 。 














遗憾 的 是 ， 应 用 无 法 使 用 媒体 查询 来 为 iPhone 4, 4S 以 及 第 四 代 iPod 
X a. Touch 增加 一 个 高 分 辩 率 的 启动 图 片 。 唯 一 可 行 的 间接 方案 是 使 用 

* JavaScript 动态 创建 1ink 元 素 ， 在 这 种 情况 下 ， 所 需要 的 图 片 尺寸 是 
640 x 920 像素 。 















































如 果 只 提供 一 幅 图 片 ， 它 的 尺寸 应 该 是 320 x 460 像素 (20 像素 留 给 顶部 的 状态 
栏 )， 适用 于 所 有 的 iPhone 和 iPod Touch. (包括 高 清 版 本 )。 但 是 它 不 适用 于 iPad, 
系统 会 使 用 常规 的 启动 图 片 (Web 应 用 最 后 一 次 使 用 的 截图 ) : 





«link rel-"apple-touch-startup-image" href="images/launch.png"> 




















^, 
^" 


如 果 你 有 一 个 iOS 设备 ， 可 以 同时 按 下 主屏 键 和 电源 键 来 截图 ， 并 将 其 用 
作 启 动 图片 。 这 样 ， 它 就 可 以 跟 Web 应 用 在 第 一 次 启动 时 的 界面 吻合 了 。 

































te 














不 同 的 启动 图 片 尺寸 可 以 定义 在 不 同 的 Link 元 素 内 ， 使 用 meaia 属性 的 CSS 媒体 
查询 。 和 图 标定 义 不 同 ， 它 不 会 用 到 sizes 属性 。 
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«link rel-"apple-touch-startup-image" href-"images/launch-iphone.png" 
media-" (max-device-width: 480px)"» 

«link rel-"apple-touch-startup-image" href-"images/launch-iPad-p.png" 
media-"screen and (min-device-width: 481px) and (max-device-width: 
1024px) and (orientation:portrait)"» 

«link rel-"apple-touch-startup-image" href-"images/launch-iPad-l.png" 
media-"screen and (min-device-width: 481px) and (max-device-width: 
1024px) and (orientation:landscape)"- 


8.4 完整 的 例子 


一 个 提供 离线 访问 ， 并 且 定 义 了 快捷 方式 图 标 和 全 屏 配置 的 jQuery Mobile Web 应 
用 的 模版 看 上 去 应 该 是 这 样 的 : 


<!DOCTYPE HTML» 
«-- 包括 应 用 程序 离线 缓存 定义 的 HTML --> 
«html manifest-"offline.appcache"'- 
«head» 
«meta charset-"UTF-8"- 
<title> 短 标题 -/title» 
«meta name-"viewport" content-"width-device-width,user-scalable-no"- 





«-- 使 用 自 定义 主题 的 jQuery Mobile Xt --- 

«link rel="stylesheet" 
href-"http://code.jquery.com/mobile/1.0/jquery.mobile.structure- 

1.0.min.css" /» 

«link rel="stylesheet" href-"custom theme.css"-» 

«script srcz"http://code.jquery.com/jquery-1.6.4.min.js"»«/script» 

«script srcz'"http://code.jquery.com/jquery-1.6.4.min.js"»«/script» 

«script srcz"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"» 


«/script» 
«-- 图 标 --> 


«link rel-"icon" href-"icons/icon32.png"» 
«link rel-"shortcut icon" href-"icons/icon32.png"-» 


k rel-"apple-touch-icon" href-"icons/icon57.png" sizesz"57x57"» 
k rel-"apple-touch-icon" href-"icons/iconll4.png" sizes-"114x114"- 
«link rel-"apple-touch-icon" href-"icons/icon72.png" sizesz"72x72"» 
k rel-"apple-touch-icon" sizes-"80x80" href-"icons/icon80.png"» 
k rel-"apple-touch-icon-precomposed" sizes-"android-only" href- 
"icons/icon57.png"» 





<-- 如 果 需 要 全 屏 展 示 --> 

«meta name-"apple-mobile-web-app-capable" content-"yes"- 

«meta name-"apple-mobile-web-app-status-bar-style" content-"black"- 

«link rel-"apple-touch-startup-image" href-"images/launch-iphone.png" 
media-" (max-device-width: 480px)"» 

«link rel-"apple-touch-startup-image" href-"images/launch-iPad-p.png" 
media-"screen and (min-device-width: 481px) and (max-device-width: 
1024px) and (orientation:portrait)"-» 

«link rel-"apple-touch-startup-image" href-"images/launch-iPad-l.png" 
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media="screen and (min-device-width: 481px) and (max-device-width: 
1024px) and (orientation:landscape)"- 


«/head» 


«body» 

















«1-- jQuery Mobile 应 用 程序 页 面 --> 











«/body» 


8.5 存储 离线 数据 

HTMLS 相关 技术 为 离线 应 用 (或 者 是 那些 不 想 使 用 AJAX 的 在 线 应 用 ) 的 本 地 化 
信息 存储 提供 了 三 种 选择 : 

* Web Storage API; 


* Web SQL Database API; 
* [ndexedDB API, 


访问 http://mobilehtml5.org， 可 以 检查 每 一 个 HTML5 相关 API 的 最 新 浏 
CA Ie ng 
uN " 览 器 兼容 性 





本 书 选择 Web Storage API 来 实现 本 地 数据 存储 ， 一 方面 它 最 容易 应 用 ， 另 一 方 
面 它 也 是 jQuery Mobile A £f ixl Aea 性 最 好 的 。 它 支持 localStorage 和 
sessionStorage 这 两 个 基于 键 值 对 进行 存储 的 集合 。 


localStorage Se a sessionStorage 也 差 不 
多 ， 只 是 每 次 浏览 器 关闭 后 它 会 被 清 








通常 情况 下 ， 每 个 主机 地 址 可 以 使 用 至 多 5M 的 本 地 存储 ， 这 是 没有 任何 
E 问题 的 。 然 而 ， 大 多 数 浏览 器 都 使 用 Unicode 存储 字符 串 ， 一 个 字符 需要 
占用 两 个 字 节 。 所 以 ， 把 存储 的 文本 控制 在 2.5Mb 以 内 是 安全 的 。 














localStorage 是 全 局 window 对 象 的 属性 ， 它 有 两 个 方法 : getItem 和 setItem， 
分 别 对 应 从 集合 获取 和 向 集合 存储 数据 。 


标准 的 localstorage API 只 能 存储 字符 串 ， 这 意味 着 可 以 存储 : 


。 转换 成 JSON 格式 字符 串 的 数组 和 对 象 ， 
。 简单 格式 的 值 ; 
。 逗号 分 割 的 值 ; 
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JavaScript 代码 ( 供 随 后 解析 执行 ) s 

CSS 样式 表 〈 供 随后 注入 ) ; 

HTML; 

转化 成 base64 字符 串 的 图 片 (data URI). 





主流 的 移动 浏览 器 支持 JavaScript 对 象 和 JSON 字符 串 相 互 转化 的 JSON 

uN API, fi Jf gsoN.stringfy (object) 将 对 象 转 成 JSON 字 符 串 ， 使 用 

- OQ JSON.parse (string) 将 字符 串 转 成 JavaScript 对 象 。 如 果 浏 览 器 不 支持 
JSON API， 可 以 使 用 Douglas Crockford 创建 的 JSON2 库 ， 它 是 免费 的 ， 
在 这 里 可 以 找到 http://github.com/douglascrockford/JSON-js。 





如 果 要 保存 数据 ， 可 以 这 样 写 : 


localStorage.setItem("name", "value"); 


如 果 要 获取 数据 ， 可 以 这 样 写 : 


var value = localStorage.getItem("name"); 
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第 9 章 
Web 应 用 实例 





章 ， 我 们 将 会 创建 一 个 完整 的 Web 应 用 。 本 书 前 面 儿童 讲 到 的 大 部 分 内 容 ， 在 
个 实例 中 都 会 应 用 到 。 这 是 一 个 为 某 次 大 会 开发 的 移动 应 用 ， 它 的 主要 目标 是 : 
。 作为 与 会 者 的 官方 应 用 ， 

。 显示 每 个 会 议 室 的 议程 

。 提供 大 会 的 各 种 信息 。 

如 果 你 和 我 一 样 参加 过 很 多 技术 会 议 ， 多 半 也 有 体会 ， 会 议 现场 的 网 络 连接 往往 都 
不 太 可 靠 ， 所 以 我 们 的 应 用 需要 支持 离线 访问 。 我 们 将 在 后 面 章节 介绍 如 何 将 其 进 
一 步 转换 成 一 个 原生 的 离线 应 用 。 


9.1 Web 应 用 的 结构 


这 个 应 用 的 结构 很 简单 ， 但 是 已 经 足够 覆盖 所 有 需要 提供 的 功能 ， 包 括 : 


这 一 
这 











。 ER; 
。 会 议 信 息 ; 
。 位 置 ; 
。 反馈 ; 
。 关于 。 


会 议 信息 列 出 所 有 有 会 议 的 时 间 段 和 每 个 会 议 室 在 各 个 时 间 段 内 会 召开 的 会 议 。 会 
议 列 表 信 息 使 用 的 是 从 服务 器 端 发 送 到 客户 端的 JSON 对 象 ， 这 些 JSON 对 象 是 通 
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it PHP 或 者 Java 等 服务 器 端 语言 生成 的 。 关 于 服务 器 端 如 何 生 成 JSON 格式 数据 ， 
以 及 如 何 通 过 内 容 管 理 系统 来 生成 数据 库 方面 的 内 容 ， 我 们 在 这 里 不 展开 介绍 。 


我 们 为 iPhone、iPod 和 iPad 用 户 提 供 的 是 一 个 全 屏 应 用 ， 因 此 会 尝试 劝导 用 户 把 
应 用 安装 到 系统 中 。 如 果 用 户 不 安装 ， 那么 就 为 他 们 提供 在 线 版 本 的 Web 应 用 。 


应 用 包含 如 下 文档 : 


e index.html (应 用 中 用 到 的 大 部 分 页 面 都 在 这 里 定义 ) ; 
* feedback.html; 
e feedback.php, 


应 用 中 用 到 的 图 片 ， 放 在 了 images 目录 里 面 : 

















* logo.png; 

e sponsors.png; 

e background.png; 

e launch-ios.png (iOS 上 的 应 用 启动 图 片 ) ; 

。 iconll4.png (iPhone 高 分 辩 率 图 标 ) ; 

e icon72.png (iPad KIR) ; 

e icon57.png (Android 以 及 iPhone 低 分 辨 率 图 标 ) 。 








当然 ， 还 需要 放 人 所 有 jQuery Mobile 框架 自 带 的 文件 ， 包 括 它 的 JavaScript, CSS 
和 图 片 文件 。 


应 用 中 唯一 需要 定期 更 新 的 文件 是 sessions.json， 一 个 从 服务 器 端 获 得 的 JSON 格 
式 的 对 象 ， 由 服务 器 端的 脚本 动态 生成 。 基 于 性 能 和 离线 应 用 的 考量 ,我们 会 使 用 
HTMLS5 的 Local Storage API 来 缓存 这 个 JSON 文件 。 


9.1.1 离线 清单 


我 们 要 创建 的 第 一 个 文件 是 针对 兼容 设备 的 HTML 缓存 清单 文件 ，Web 应 用 的 离线 
文件 都 需要 在 其 中 声明 。 


应 用 的 清单 文件 是 这 样 的 : 





CACHE MANIFEST 


CACHE: 





# jQuery Mobile 框架 文件 
jquery.js 
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jauery.mobile.js 
jauery.mobile.css 
images/ajax-loader.png 
images/icons-18-black.png 
images/icons-18-white.png 
images/icons-36-black.png 
images/icons-36-white.png 


# HTML 文档 
# index.html 始终 会 被 缓存 ， 无 需 显 式 的 声明 
feedback.html 








# 自 定义 的 脚本 
index.js 
index.css 























# 自 定义 的 图 片 
logo.png 
sponsors .png 
background. png 























# 应 用 不 需要 缓存 108 图 标 以 及 启动 图 片 ，ios 平台 自己 会 缓存 它们 


























NETWORK: 
# 只 有 在 请 求 JsoN 文件 和 获取 反馈 的 脚本 时 ， 应 用 才 会 访问 网 络 
# 把 mobilexweb.com 替换 成 自己 的 域名 
http://mobilexweb.com/jqmbook/sessions.json 
http://mobilexweb.com/jqmbook/feedback.php 



































我 们 没有 在 离线 清单 的 NETWORK: 段落 中 使 用 通配符 *。 因 此 , 一旦 应 用 
SS 安装 之 后 ， 就 不 会 再 访问 互联 网 了 。 

















9.1.2 页 面 


让 我 们 从 最 重要 的 index.html 开始 。 它 是 一 个 典型 的 jQuery Mobile 文档 ， 包 含 本 
书 讲 过 的 所 有 HTML 头 部 标签 (meta 标签 、 图 标 声明 ， 以 及 视 口 声明 )， 包 含 除 
form 表 单 〈 它 是 最 有 可 能 每 次 都 被 用 户 访问 的 页 面 ) 之 外 所 有 的 页 面 。 我 们 可 以 
在 后 期 把 一 些 内 藤 的 页 面 拆 成 外 部 的 HTML 文件 。#sessions 页 面 是 主 列表 页 面 ， 
而 details 页 面 是 会 议 详细 信息 的 模版 文件 。 


在 #main 页 面 上 ， 我 们 不 打算 使 用 页 头 ， 而 是 用 会 议 的 徽标 代替 之 。 其 他 页 面 上 还 
是 要 使 用 页 头 。 





我 们 不 打算 在 HTML 文档 上 提供 会 议 的 信息 ， 而 是 通过 AJAX 从 服务 器 端 
44. 获取 数据 (封装 成 JSON 对 象 ) 来 把 内 容 填 到 页 面 上 。 所 以 #sessions 和 
"" #aetails 源 代码 上 看 不 到 任何 关于 会 议 的 信息 。 
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下 面 是 index.html 文件 的 源 代 码 : 


<!DOCTYPE HTML» 

«html manifest="manifest .appcache"> 

<head> 

<meta charset="UTF-8"> 

«title»jOM IY </title> 

«meta name-"viewport" content="width=device-width,user-scalable=no"> 

«link rel="stylesheet" href-"jquery.mobile-1.0.css" /> 

«link rel-"stylesheet" href-"index.css" /» 

«script src-"jquery.js"»«/script» 

«script src-"index.js"»«/script» 

«script src-"jquery.mobile-1.0.js"»«/script» 

«meta name-"apple-mobile-web-app-capable" content-'"yes"- 

«meta name-"apple-mobile-web-app-status-bar-style" content-"black"- 

«link rel-"apple-touch-icon" sizes-"80x80" href-"icons/icon80.png"» 

«link rel-"apple-touch-icon" href-"images/icon57.png" sizesz"57x57"» 

«link rel-"apple-touch-icon" href-"images/iconll4.png" sizes-"114x114"- 

«link rel-"apple-touch-icon" href-"images/icon72.png" sizes-z"72x72"» 

«link rel-"apple-touch-icon-precomposed" sizes-"android-only" href- 
"images/icon57.png"» 

«/head» 


«body» 


el-- xxx 主页 xxx 22. 





«div data-role-"page" id-"home"- 


«div data-role-"content"- 
<p><img src-"images/logo.png" alt-"jOM Conference" width-"300" height= 
"62" align="middle"> 
</p> 
<h3>November 5th</h3> 
<div class="ui-grid-a"> 
«div class="ui-block-a"><a href="http://www.twitter.com/fakeaccount" 
data-role-"button" data-theme-"b" target="_blank" >Twitter</a> 
</div> 
«div class="ui-block-b"><a href-"http://www.facebook.com/fakeaccount" 
data-role-"button" data-theme-"b" target-" blank"-sFacebook«/a» 
«/div» 
«/div» 
«/div» 


«div data-role-"footer" data-position-"fixed" data-id-"toolbar"- 
«div data-role-"navbar"» 
<ul> 

<li><a class="ui-btn-active" href="#home" data-icon="home" 
data-transition="fade"> 
Home</a></li> 

<li><a href="#sessions" data-icon="grid" data-transition="fade"> 
Sessions</a></li> 

<li><a href="#where" data-icon="info" data-transition="fade">Where 
</a></li> 





<li><a href-"HGabout" data-icon-"star" data-transition-"fade"»About 


«/a»«/li» 
<li><a href-"feedback.html" data-icon-"plus" data-rel-"dialog"- 
Feedback«/a»«/1li» 
«/ul» 
</div> 
</div> 
</div> 


<i- xxxx 会 议 列表 页 面 xxxx --> 
«div data-role-"page" id-"sessions"-» 


«div data-role-"header"- 
«hl»5Sessions«c/h1» 
«a href-'javascript:refresh();' data-icon-"refresh" id-"refresh" 
data-theme-"c" class-"ui-btn-left" data-iconpos-"notext'»«/a» 
</div> 


<div data-role="content"> 
<p id="console"></p> 
«ul data-role-"list-view" data-inset-"true" id="slots"> 
«/ul» 

</div> 


<div data-role="footer" data-position="fixed" data-id="toolbar"> 
<div data-role="navbar"> 
«ul» 
<li><a href="#home" data-icon-"home" data-transition-"fade"-Home 
«/a»«/li» 
<li><a class-"ui-btn-active" href-"fsessions" data-icon-"grid" 
data-transition-"fade"»Sessions«c/a»«/li» 
<li><a href-"iwhere" data-icon-"info" data-transition-"fade"» 
Wherec/a»«/li» 
<li><a href-"iabout" data-icon-"star" data-transition-"fade"-» 
About«/a»«/li» 
<li><a href-"feedback.html" data-icon-"plus" data-rel-"dialog"» 
Feedback«/a»«/li» 
«/ul» 
</div> 
</div> 


</div> 
<i-- rsrs 会 议 详细 页 xxxx --> 
«div data-role-"page" id-"details" data-add-back-btn-"true"- 
«div data-role-"header"» 
«hl»Sessions details«c/h1» 


«/div» 


«div data-role-"content"-» 
«div id-"sessionInfo"» «/div» 
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</div> 


<div data- 


role="footer" data-position="fixed" data-id="toolbar"> 


<div data-role="navbar"> 


<ul> 
<li><a 


<li><a 
<li><a 
<li><a 
<li><a 
</ul> 
</div> 


</div> 


</div> 


href="#home" data-icon="home" data-transition="fade">Home 
</a></li> 

href="#sessions" data-icon="grid" data-transition="fade"> 
Sessions</a></li> 

href="#where" data-icon="info" data-transition="fade">Where 
</a></li> 

href="#about" data-icon="star" data-transition="fade">About 
</a></li> 

href="feedback.html" data-icon-"plus" data-rel="dialog"> 
Feedback</a></li> 


<l-- xxxx 位 置 页 面 **** --> 


«div data-role-"page" id-"where"- 


«div data- 


role-z"header"-» 


«hli»Wherec/h1» 


«/div» 


«div data- 


role-"content"- 


Hasta la vista 1234, ACME $È 


</div> 


<div data- 


role="footer" data-position="fixed" data-id="toolbar"> 


<div data-role="navbar"> 


«ul» 


<li><a href="#home" data-icon-"home" data-transition-"fade"-Home 


«/a»«/li» 


<li><a href="#sessions" data-icon-"grid" data-transition-"fade"- 


Sessionsc/a»«/li» 


<li><a class-"ui-btn-active" href-"iwhere" data-icon-"info" data- 


<li><a href="#about" data-icon-"star" data-transition-"fade"»About 


transition-"fade"»Wherec/a»«/li» 


«/a»«/li» 


<li><a href-"feedback.html" data-icon-"plus" data-rel-"dialog"- 


«/ul» 
«/div» 
«/div» 


«/div» 


Feedback«/a»«/li» 


el-- xxxx 关于 页 x*** --> 
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«div data-role-"page" id-"about"- 


«div data-role-"header"- 
<hl>About</h1> 
</div> 


<div data-role="content"> 
<div data-role="collapsible"> 
«h3»0rgnization«c/h3» 
<p>This congress is organized by ACME </p> 


</div> 
<div data-role="collapsible"> 
<h3>Dates<</h3> 
<p>November 5th, 2015 9am to 6pm</</p> 
</div> 
<div data-role="collapsible"> 
<h3>History<</h3> 
<p>First edition of this congress was....... </p> 
</div> 
<div data-role="collapsible"> 
<h3>Sponsors</h3> 
<img src="images/sponsors.png" width="300" height="400"> 
«/div» 
«/div» 


«div data-role-"footer" data-position-"fixed" data-id-"toolbar"- 
«div data-role-"navbar"- 
<ul> 
<li><a href="#home" data-icon="home" data-transition="fade"> 
Home</a></li> 
<li><a href="#sessions" data-icon="grid" data-transition="fade"> 
Sessions</a></li> 
<li><a href="#where" data-icon="info" data-transition="fade"> 
Where</a></li> 
<li><a class="ui-btn-active" href="#about" data-icon="star" 
data-transition="fade">About</a></li> 
<li><a href-"feedback.html" data-icon-"help" data-transition- 
"fade"sFeedback«/a»«/li» 
«/ul» 
</div> 
«/div» 





«/div» 


<io- xxx 10S 安装 窗口 页 面 xxxx --> 
«div data-role-"page" id-"ios"- 


«div data-role-"header"- 
«hl»installationc/h1» 
</div> 


<div data-role="content"> 
«p id="consoleInstall">installation</p> 
«div id="install"> 
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«p»To finish the installation, you must add this webapp to your 


Home Screen. To do that, touch the 
Home Screen"</p> 
«/div» 


arrow and select "Add to 


«a href-"javascript:openWithoutInstallation()" class- 
"openWithoutInstall"2Open without installation«/a» 


«/div» 
«/div» 


«/body» 
</html> 











#sessions 页 面 上 有 一 个 ID 为 console 的 空 的 p 元 素 ， 





listview 模块 。 我 们 会 在 页 面 加 载 后 通过 JavaScript H4 


面 中 的 map 元 素 的 用 途 也 是 一 样 的 。 

















是 里 面 被 选中 的 元 素 。 


提交 反馈 的 表单 是 一 个 对 话 框 ， 它 的 代码 在 feedback.html 


<!DOCTYPE HTML» 

«html» 

«head» 

«meta charset-"UTF-8" /> 
«title»jOM ZüX </title> 


我 们 使 用 了 一 个 固定 的 页 脚 ， 以 确保 导航 条 在 翻 页 时 不 会 应 用 动画 。 


以 及 一 个 ID 为 slots 的 
其 中 填 入 数据 。#where 页 


如 果 要 使 用 navbar， 我 们 需要 在 每 个 页 面 (无 论 是 内 内 还 是 外 部 的 ) 都 
ES 把 它 包 含 进来 ， 放 在 页 头 或 者 页 脚 里 。 如 果 不 想 要 重复 的 代码 ， 可 以 用 
JavaScript 来 为 每 个 页 面 插 入 navbar。 各 页 面 navbar 上 唯一 可 以 改变 的 


<meta name="viewport" content="width=device-width,user-scalable=no" /> 
«link rel-"stylesheet" href-"jquery.mobile-1.0.css" /> 


«script src-"jquery.js"»«/script» 

«script src-'script.js"»«/script» 

«script src-"jquery.mobile-1.0.js"»«/script» 
«/head» 


«body» 
«div data-role-"dialog"- 
«div data-role-"header"- 
«hl1»2Feedback«/h1» 


«/div» 


«div data-role-"content"- 
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«form action-"feedback.php" method="post" data-transition-"none"- 


«div data-role-"fieldcontain"» 

«label for-"name"sName:«/label» 

«input type-"text" name-"name" id-"name" value-"" required /» 
</div> 


<div data-role="fieldcontain"> 

«label for="email">Email:</label> 

«input type="email" name="email" id-"email" value-"" required /» 
</div> 


<div data-role="fieldcontain"> 
<label for="comments">Comments:</label> 
<textarea cols="40" rows="8" name="comments" id="comments"> 
</textarea> 
«/div» 


«div data-role-"fieldcontain"» 
«label for-"contacted"»Can we contact you?«/label» 
«select name-"contacted" id-"contacted" data-role-"slider"- 
«option value-s"no"»No«/option» 
«option value-"yes"»Yes«c/option» 
</select> 
</div> 


<input type="submit" value-"Send" data-theme="a" /> 


</form> 
</div> 


</div> 
</body> 
</html> 





这 里 不 详细 讲述 客户 端 以 及 服务 器 端的 数据 验证 。 但 是 记 住 ， 在 对 数据 进 


MESS 行 处 理 前 一 定 要 先 验证 。 


feedback.php 会 对 数据 进行 验证 ， 然 后 把 数据 存 和 人 数据库 或 者 通过 邮件 发 送出 去 ， 
最 终 展 示 一 个 结果 页 面 : 




















<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="UTF-8" /> 

<title>jQM Conference</title> 

«meta name-"viewport" content="width=device-width,user-scalable=no" /> 
«link rel="stylesheet" href-"jquery.mobile-1.0.css" /> 
<script src-"jquery.js"»«/script» 

«Script src-"script.js"»«/script» 

<script src-"jquery.mobile-1.0.js"»«/script» 

«/head» 
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«body» 
«div data-role-"dialog"- 
«div data-role-"header"- 
«hl»Feedback«/h1» 
</div> 


<div data-role="content"> 


<?php 
// Nalidation and processing here 
P 


TA 


Thanks for your feedback. 


<a data-role="button" data-inverse="true" href="index.html">Close</a> 
</div> 


</div> 
</body> 
</html> 


9.1.3 样式 
index.css 中 包含 了 自 定 义 的 样式 : 


/* 应 用 于 页 头 的 样式 */ 

.ui-header { 
background-color: #69C; 
background-image: url('images/background.png'); 
background-position: top right; 
background-repeat: no-repeat 





} 
/* 离线 应 用 安装 过 程 中 使 用 的 样式 */ 


dSconsole, t&consoleInstall ( 
background-color: #FF6; 
border-radius: 10px; 
-webkit-border-radius: 10px; 
padding: 5px; 
margin: 0; 
text-align: center; 
border: 1px solid #CCC; 
font-size: small; 








/* 主页 面 内 容 区 域 */ 

#home [data-role-content] ( 
background-color: white; 
text-align: center; 
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} 
/* 按钮 */ 


.openWithoutInstall { 
margin-top: 50px; 
display: block; 

} 

/* ”导航 条 文字 样式 */ 


[data-role=navbar] .ui-btn-text { 
font-size: smaller; 


} 


9.1.4 数据 
包含 会 议 信息 的 JSON 文件 的 格式 可 以 参考 下 面 这 个 例子 ; 


( 


"slots": 


[ 
// 有 的 时 间 段 是 特殊 时 间 ， 如 开放 时 间 、 休 息 时 间 、 午 餐 时 间 ， 等 等 








( "id": 1, "time": "09:00", "message": "Opening" }, 
// 有 的 时 间 段 是 会 议 时 间 
( "id": 2, "time": "09:20") 
di 
"sessions": 
[ 
( "id": 1, "title": "A great session", "timeId": 2, 
"description": Meest "speaker": Wess. "room": "en } 


9.1.5 ”脚本 


有 一 些 功能 必须 要 在 JavaScript 中 来 实现 ， 比 如 : 


。 iOS 全 屏 探测 ， 
。 会 议 信息 下 载 ， 
。 会 议 列 表 以 及 会 议 详 细 信息 页 面 的 动态 生成 。 


index.js 中 的 代码 如 下 : 





var data; 
$(document).bind("mobileinit", function () ( 
if (navigator.platform -- "iPhone" || navigator.platform -- "iPad" 
|| navigator.platform -- "iPod" || navigator.platform -- 
"iPad" || navigator.platform == "iPhone Simulator") { 
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// 这 是 一 个 ios 设备 ， 检 测 现在 是 否 在 全 屏 模式 下 


if (!navigator.standalone) { 





























showlOSInvitation(); 
} 
} 
/* 捕捉 页 面 加 载 行为 ， 动 态 确认 会 议 信息 */ 
$("#sessions") .live("pageshow", function () ( 
if (window.localStorage !- undefined) ( 
// 有 可 用 的 HTML5 本 地 存储 
if (window.localStorage.getItem("data") !- 
undefined && window.localStorage. 
getItem("data") !- null) { 
// 在 检测 更 新 的 同时 ， 首 先 加 载 离线 存储 的 会 议 信息 
showSessions (window.localStorage.getItem 
("data")); 
$ ("#console") .html ("Checking data update"); 
} else { 
// 没有 本 地 存储 数据 
$ ("#console") .html ("Downloading session 
data..."); 
} 
} else { 
// 不 支持 HTML5 本 地 存储 ， 每 次 都 从 服务 器 端 下 载 JSON 数据 
$ ("#console") .html ("Downloading session data..."); 
} 
loadSessionsAjax(); 


p»: 


function showlIOSInvitation() ( 
setTimeout (function () { 
// 隐藏 保存 信息 ， 直 到 web 应 用 下 载 完成 
$("Hinstall").hide(); 
// 打开 ios 提示 ， 引 导 用 户 创建 首页 快捷 图 标 
$.mobile.changePage ($("Hios"), (transition: "slideup", 
changeHash: false]); 














), 100); 

















// 捕捉 HTML5 应 用 缓存 事件 ， 提 供 有 用 的 信息 
if (window.applicationCache !- undefined) { 
window.applicationCache.addEventListener('checking', function () { 
$ ("#consoleInstall").html ("Checking version"); 


p»: 


window.applicationCache.addEventListener('downloading', function () { 
$("4consoleInstall").html("Downloading application. 


Please wait..."); 
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p: 


window.applicationCache.addEventListener('cached', function () { 
$ ("#consoleInstall") .html ("Application downloaded"); 
$("#install") .show(); 


D; 


window.applicationCache.addEventListener('updateready', function () { 
$("4consoleInstall").html("Application downloaded"); 
$("HSinstall").show(); 

] pg 

window.applicationCache.addEventListener('noupdate', function () ( 
$("sconsoleInstall").html("Application downloaded"); 
$("HBinstall").show(); 

p: 

window.applicationCache.addEventListener('error', function (e) ( 
$("4consoleInstall").html("There was an error downloading 

this app"); 

Ls 

window.applicationCache.addEventListener('obsolete', function (e) ( 
$("4consoleInstall").html("There was an error downloading 


this app"); 
Jj 
) 
) 
function loadSessionsAjax() { 
// 把 JSON 对 象 用 文本 表示 ， 更 容易 做 本 地 存储 
$.ajax( /*"http://www.mobilexweb.com/congress/*/ "sessions.json", ( 
complete: function (xhr) { 
if (window.localStorage !- undefined) ( 
if (window.localStorage.getItem("data") !- undefined && 
window.localStorage.getItem("data") !- null) { 
if (xhr.responseText -- window.localStorage. 
getItem("data")) { 


// 没有 新 的 会 议 信息 
$ ("#console") .html ("Schedule is updated"); 
) eise { 
// 有 新 的 会 议 信息 
if (confirm("There is an update in the 
Schedule available, do you want to 
load it now?")) { 
$ ("#console") .html ("Schedule is 
updated"); 
showSessions (xhr.responseText); 
} else { 
$ ("#console") .html ("Schedule will 
be updated later"); 
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) eise ( 
//| 支持 本 地 存储 ， 但 是 没有 之 前 保存 的 缓存 
$("#console") .html ("Schedule is updated"); 
showSessions (xhr.responseText); 

} 

} else { 

// 不 支持 本 地 存储 ， 显 示 的 信息 不 会 进行 保存 

$ ("#console") .html ("Schedule is updated"); 

ShowSessions (xhr.responseText); 


} 
) 
dataType: 'text', 
error: function () ( 
$ ("#console") .html ("Schedule update could not be downloaded"); 
} 


pD; 
} 


var isFirstLoad = true; 


function showSessions (string) ( 


if (window.JSON !- undefined) { 
data - JSON.parse(string); 
) eise ( 
data = eval("(" + string + ")"); 
} 
if (window.localStorage != undefined) ( 


// 把 对 象 保存 成 字符 串 格 式 


window.localStorage.setIitem("data", string); 


$("Zslots").html(""); 


var html = ""; 
for (var i = 0; i < data.slots.length; i++) ( 


if (data.slots[il.message !- null) { 
// 这 是 一 个 特殊 的 时 间 段 ， 因 此 创建 一 个 分 隔 
html += "<li data-role-'list-divider' data- 
groupingtheme='e'>" + data.slots[i].time + ": 


+ data.slots[i].message + "</li>"; 














} else { 
// 正常 的 有 会 议 的 时 间 段 
html += "«li»«a href-'javascript:showDetails(" + 
i + ") ! 
»Sessions of " + data.slots[i].time + "«/a»«/li»"; 


Ra 


$("Sslots").html (html); 





if (isFirstLoad) ( 


$("Eslots"). 

isFirstLoad 
) eise { 

$ ("#slots"). 


) 


function showDetails (index) 


listview(); 
- false; 


listview('refresh'); 


( 


$("#details hi") .html ("Sessions of " + data.slots[index].time); 
var html s "i 
for (var i = 0; i < data.sessions.length; i++) ( 


if (data.ses 


// 为 每 个 会 议 创建 一 个 可 折 生 的 组 件 


html 
html 
html 
html 
html 
html 
html 
} 
} 
// 提供 前 往 详 细 页 的 信息 


$ ("#sessionInfo").ht 





$("#sessionInfo div" 











// 导向 详细 页 


$.mobile.changePage( 





E 








) 


sions[i].timeId == data.slots[index].id) { 








+= "<div data-role-'collapsible'»"; 

42 "<h3>" + data.sessions[i].title + "</h3>"; 
+= "<h3>" + data.sessions[il.room + "</h3>"; 
+= "<h4>Speaker/s: " + data.sessions [i] . speaker; 
+= "</h4>"; 

+= "<p>" + data.sessions [i] .description + "</p>"; 
+= "</div>"; 

ml (html); 

).collapsible(); 


$("#details")); 


function refresh() { 
$ ("#console") .html ("Verifying"); 
loadSessionsAjax(); 

} 

function openWithoutInstallation() { 


// 移 除 类 似 于 对 话 框 的 ios 安装 页 





$.mobile.changePage( 
reverse: true ]) 


针对 Android 或 者 其 他 习 











这 个 应 用 还 有 很 多 可 以 改善 的 


相似 的 安装 页 面 ， 链 向 应 用 服务 器 或 者 应 用 商店 。 





E 














$("#home"), {transition: "slideup", 


i 


EF 台 ， 我 们 可 以 创建 混合 应 用 或 者 页 面部 件 来 提供 





地 方 。 比 如 ， 可 以 为 每 个 会 议 创建 单独 的 像 


&details!22 这 样 的 URL。 那 么 ， 我 们 就 可 以 根据 这 个 地 址 ， 为 内 部 链接 提供 动 
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态 的 详细 内 容 加 载 。 图 





9-1 展示 了 在 10S 系统 上 我 们 这 个 基于 浏览 器 的 Web 应 用 的 


效果 就 像 全 屏 程 序 一 样 。 





















November 5th 


Feedback 


Close 


Thanks for your feedback. 










Feedback 
© Organization 





09:00: Opening 


Sessions of 09:20 © 












This congress is organized by ACME 










Sessions of 10:00 


10:40: Break 


Sessions of 11:00 


© Dates 







© History 





© 
Sessions of 11:40 © 
Comments: 





12:20: Lunch. 


installation < Back | Sessions of 09:20 


© A great session 





To finish the installation, you must add 
this webapp to your Home Screen. To 
do that, touch the arrow and select "Add 
http://localhost t5 Horne Screen 






Open without installation. 
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I REX 








jQuery 因 其 活跃 的 插件 社区 而 被 业界 广 为 称 道 。 同 样 地 ，jQuery Mobile 也 可 以 很 方 
便 地 经 由 第 三 方 插件 进行 扩展 。 你 可 以 在 http://jquerymobile.com/resources/#Plugins 
找到 最 新 的 jQuery Mobile 插件 。 





jQuery Mobile 支持 多 种 形式 的 扩展 。 
。 主题 
一 个 CSS 文件 ,或 一 组 图 片 ， 或 者 两 者 兼 有 。 


。 插件 
一 个 JavaScript 文件 ， 一 个 CSS 文件 ， 为 框架 增添 新 的 部 件 (data-role)。 


。 扩展 
一 个 JavaScript 文件 ， 为 现 有 的 jQuery Mobile 部 件 和 核心 功能 增加 新 的 行为 。 


10.1 创建 插件 


jQuery Mobile 是 基于 jQuery UI 的 框架 进行 构建 的 ， 因 此 ， 为 jQuery Mobile 创建 
插件 的 方式 和 为 jQuery UI 创建 插件 差不多 。 








要 创建 具备 恨 好 兼容 性 的 插件 ， 首 先 需 要 认识 到 以 下 问题 。 





。 应 该 延续 jQuery Mobile 具备 良好 兼容 性 的 传统 ， 那 些 只 兼容 少数 平台 的 插件 对 
区 价值 有 限 。 


BE 
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。 用 户 在 使 用 插件 时 ， 只 需 在 页 面 插入 一 个 JavaScript 文件 和 一 个 CSS 文件 。 

。 尽 可 能 地 使 用 aata-* 属性 ， 以 延续 框架 的 风格 。 

。 插件 应 能 无 颖 地 兼容 现 有 的 自 定义 命名 空间 以 及 主题 切换 。 

。 插件 应 和 框架 中 的 其 他 部 件 一 样 自动 进行 初始 化 。 

。 尽 可 能 地 使 用 带 有 语义 的 HTML5 标签 定义 插件 内 容 。 

。 如 果 可 能 的 话 ， 支 持 无 障碍 访问 (比如 ARIA)。 

。 尽 可 能 地 避免 使 用 通用 的 名 字 来 命名 自 定义 的 data-role， 以 避免 与 框架 后 续 版 
本 中 的 命名 发 生 冲 突 。 例 如 ， 不 要 用 tableview 或 者 datepicker 这 样 的 命名 ， 

因为 后 续 版 本 的 框架 可 能 会 用 到 这 些 名 字 。 


HTML5、CSS3、ARIA 等 内 容 已 经 超越 了 本 书 的 范畴 。 但 是 要 创建 一 个 
MOS 具备 良好 兼容 性 的 优秀 插件 ， 必 须要 能 够 很 好 地 掌握 这 些 技术 。 
































10.1.1. 基础 模板 

部 件 可 以 通过 以 下 两 种 方式 来 初始 化 。 

。 自动 初始 化 ， 即 借助 aata-role 或 者 带 有 语义 的 HTML5 代码 的 声明 ， 自 动 地 
初始 化 部 件 。 

。 显 式 地 通过 jQuery 语法 调用 部 件 的 构造 函数 进行 初始 化 , 例如 : $ ("#myelement"). 
widgetname () 。 

创建 部 件 要 做 的 第 一 件 事 是 命名 ， 应 尽 可 能 避免 和 未 来 的 框架 部 件 重 名 。 

部 件 应 该 包含 一 个 命名 格式 为 jquery.mobile.<plugin-name>.js 的 JavaScript 文件 ， 

还 可 以 包含 一 个 格式 为 jquery.mobile.«plugin-name».css 的 CSS 文件 。 

部 件 的 模板 是 这 样 的 : 


(£unction($)( 


// 把 所 有 的 代码 封装 在 这 个 方法 中 以 确保 $ jQuery 对 象 的 引用 











// 部 件 的 定义 
$.widget("mobile.ourWidgetName", $.mobile.widget, { 
options: { 


// 创建 部 件 默 认 的 选项 








bs 
// 私有 方法 
create: function() { 


// 构造 函数 


) 


// 公有 方法 
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enable: function() { 
// 启用 部 件 
} 


disable: function() { 


// 禁用 部 件 
) 


refresh: function() ( 


// 刷新 部 件 





} 
// 部 件 定义 结束 














// 自动 初始 化 代码 








$(document).bind("pagecreate", function(event) { 
// 找到 相应 的 data-role 然后 应 用 初始 化 方法 
$ (event.target).find(":jqmData (role-'ourWidgetName!)").ourWidgetName () ; 
p: 
} (jQuery) ) ; 


10.1.2. ”创建 插件 

让 我 们 通过 创建 一 个 部 件 来 实际 地 展示 一 下 创建 插件 的 过 程 。 这 个 部 件 的 功能 是 动 
态 提供 不 同 尺 寸 的 图 片 。 它 基于 Sencha IO Sre 提供 的 云 服 务 (免费 的 )， 这 个 服务 
能 够 根据 当前 移动 浏览 器 的 大 小 帮 你 调整 图 片 的 尺寸 。 


Aa 




















从 http://mobilexweb.com/go/senchaio 可 以 找到 Sencha IO Sre 服务 的 官方 

AJ ENT 

OY " 文档 。 

es 

我 们 把 这 个 部 件 叫 做 aynamicimage。 它 有 两 种 实现 方式 ， 第 一 种 是 找到 页 面 上 的 
所 有 img 元 素 自 动 地 应 用 dynamicimage 调整 大 小 ;第 二 种 是 定义 一 个 新 的 aata- 
role, 叫做 dynamicimage, 只 针对 data-role 为 dynamicimage 的 img 元 素来 调 
整 大 小 。 在 这 个 例子 中 我 们 选择 第 二 种 方式 。 





1. 用 法 

整个 思路 是 这 样 的 ， 我 们 需要 定义 一 个 包含 data-src 属性 的 img 元 素 ， 这 个 元 素 
随后 会 加 载 Sencha IO Src 提供 的 调整 过 大 小 的 图 片 。 不 使 用 标准 的 src 属性 是 为 
了 避免 重复 加 载 原 图 和 调整 过 大 小 的 图 片 。 

此 外 还 需要 定义 两 个 特殊 的 属性 ，dqata-wiath 用 来 定义 图 片 占据 设备 屏幕 的 百 分 
比 ，data-margin 用 来 定义 图 片 离 屏幕 窗口 的 边 距 。 


由 于 jQuery Mobile 没有 为 图 片 提供 视觉 特效 ， 所 以 我 们 没有 在 图 片上 应 用 主题 。 




















扩展 框架 | 205 


2. 部 件 
每 个 部 件 都 是 一 个 带 有 属性 和 方法 的 JavaScript 对 象 。 以 下 划 线 为 首 字 母 命 名 的 方 
法 是 私有 方法 。 在 方法 内 部 ，this 指 代 的 是 当前 部 件 对 象 ， 而 this.element 指 
代 的 是 部 件 所 对 应 的 HTML 元 素 。 
$.widget("mobile.dynamicimage", $.mobile.widget, { 
options: { 
width: "1008", 
margin: 0 
} 
DE 
_create 方法 是 部 件 的 构造 器 。 它 只 在 初始 化 的 时 候 被 调用 ， 我 们 可 以 通过 this. 
options 来 获得 部 件 的 各 项 配置 。 


它 的 构造 方法 是 这 样 的 : 














$.widget("mobile.dynamicimage", $.mobile.widget, { 
options: { 
width: 100, 
margin: 0 


) 


create: function() ( 

// 调用 一 个 私有 方法 

this. loadURL(); 

} 
p» 

每 个 公有 方法 (方法 名 不 以 下 划 线 开头 的 ) 都 可 以 通过 部 件 的 接口 调用 。 通 常 来 说 ， 
我 们 至 少 需要 实现 refresh, enable fI disable 这 三 个 jQuery Mobile 里 的 通用 方 
法 。 举 个 例子 ， 程 序 通过 JavaScript 改变 图 片 的 URL 后 ， 需 要 用 $ ("tourImage"). 
dynamicimage ("refresh") 调用 公有 方法 refresh 来 触发 部 件 的 刷新 行为 。 





























refresh, enable, disable 这 三 个 方法 的 定义 如 下 : 


$.widget("mobile.dynamicimage", $.mobile.widget, { 
options: { 
width: 100, 
margin: 0 


create: function() { 
/ / 调用 一 个 私有 方法 
this. loadURL(); 

bh 

// 公有 方法 

enable: function() { 
// 启用 部 件 
$(this.element).attr('disabled', ''); 








disable: function() { 
// 禁用 部 件 
S$(this.element).removeAttr('disabled'); 
}, 
refresh: function() { 
// 刷新 部 件 
this. loadURL(); 





T 


最 后 是 包含 核心 逻辑 的 私有 方法 loadURL 的 定义 : 


_loadURL: function() { 
// this.element 就 是 我 们 的 img 元 素 





var url; // 用 来 定义 Sencha IO Src 服务 的 URL 
url = "http://src.sencha.io/"; 


var parameters - ""; 
if (!isNaN(this.options.width)) ( 

parameters += "x" + this.options.width; 
) 


if ((!isNaN(this.options.margin)) && this.options.margin»0) { 
parameters += "-" + this.options.margin; 


if (parameters.length»0) ( 
url += parameters + n"; 
) 


// Sencha IO 需要 提供 URL 的 绝对 路 径 
var originalUrl = $(this.element).jqgmData("src"); 
if (originalUrl.length»1) { 
var newUrl - ""; 
if ($.mobile.path.isAbsoluteUrl(originalUr1l)) { 
// 图 片 的 URL 是 绝对 路 径 


newUrl = originalUrl; 











) eise { 

















// 图 片 URL 是 相对 路 径 ， 我 们 来 计算 它 的 绝对 路 径 

var baseUrl = $.mobile.path.parseUrl(location.href); 

var baseUrlWithoutScript = baseUrl.protocol + "//" + 
baseUrl.host + baseUrl.directory; 

newUrl - $.mobile.path.makeUrlAbsolute (originalUrl, 
baseUrlWithoutScript); 


) 


url += newUrl; 


$(this.element).attr("src", url); 


3. 自动 初始 化 


加 上 下 面 这 段 自动 初始 化 的 代码 ， 页 面 就 会 查找 所 有 带 date-role-"dynamicimage" 
属性 的 元 素来 创建 dynamicimage 实例 。 
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$(document).bind("pagecreate", function(event) ( 
// 找到 相应 的 aata-role， 调 用 dynamicimage 的 构造 器 
$ (event.target).find("img:jqmData (role-'dynamic-image')").dynamicimage(); 

















使 用 3amData 而 不 是 attr， 可 以 使 代码 兼容 自 定义 命名 空间 。 元 素 中 所 
有 的 data-* 属性 都 会 自动 地 匹配 到 部 件 对 象 内 部 的 this .options 中 。 











4. 使 用 插件 
首先 是 添加 插件 的 JS 文件 ， 在 引入 jQuery Mobile 的 JS 文件 的 后 面 ， 加 上 : 


<script src="jquery.mobile-dynamicimage-1.0.js"></script> 


然后 我 们 只 需要 创建 配置 了 正确 参数 的 img 元 素 就 可 以 了 : 








«1-- 占据 屏幕 全 部 宽度 的 图 片 --> 


«img data-src-"images/photo.png" data-role-"dynamic-image"- 





«1-- 占据 屏幕 40% 宽度 的 图 片 --> 


<img data-src="images/photo.png" data-role="dynamic-image" data-width="40"> 











«1-- 占据 屏幕 100% 宽度 并 且 带 20 个 像素 的 外 边 距 的 图 片 --> 


«img data-src="images/photo.png" data-role-"dynamic-image" data-margin="50"> 
g g P. png yn g g 


插件 效果 见 图 10-1, 























.Camier c — 106PM — um 


Dynamic Image 





J mobile framework. 
«« jQuerv 


«& jQuerv 


< > prom — n 











10-1: 插件 在 jQuery Mobile 页 面 上 的 运行 效果 ， 同 一 张 图 片 经 由 Sencha IO Sre 的 服务 
调整 成 不 同 的 尺寸 
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5. 完整 的 代码 


"Ti jquery.mobile-dynamicimage-1.0.js 源 文件 中 的 全 部 代码 ; 


(£unction($)( 
// 小 部 但 
$.widget( 





"mobile.dynamicimage", $.mobile.widget, ( 


( 


margin: 0, width: 100 


function() ( 


this. loadURL(); 


// 私有 方法 


_loadURL: function() { 


//this.element 就 是 我 们 的 img 7038 





var url; // 用 来 定义 Sencha IO Src 服务 的 URL 
url = "http://src.sencha.io/"; 


var parameters - ""; 
if (!isNaN(this.options.width)) ( 
parameters += "x" + this.options.width; 


) 


if ((!isNaN(this.options.margin)) && this.options. 
margin»0) (parameters += "-" + this.options. 
margin; 


) 


if (parameters.length»0) ( 
url += parameters + w/a 


) 


// Sencha IO 需要 提供 URL 的 绝对 路 径 
var originalUrl = $(this.element).jqmData("src"); 
if (originalUrl.length»1) { 
var newUrl - ""; 
if ($.mobile.path.isAbsoluteUrl(originalUr1)) { 
// 图 片 的 URL 是 绝对 路 径 


newUrl = originalUrl; 











) eise { 











// 图 片 URL 是 相对 路 径 ， 我 们 来 计算 它 的 绝对 路 径 

var baseUrl = $.mobile.path.parseUrl 
(location.href); 

var baseUrlWithoutScript = baseUrl. 
protocol + "//" + baseUrl.host + 
baseUrl.directory; 

newUrl - $.mobile.path.makeUrlAbsolute 
(originalUrl, baseUrlWithoutScript); 








url += newUrl; 


$(this.element).attr("src", url); 
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T 
// 公有 方法 
enable: function() { 





// 启用 小 部 件 
$(this.element).attr('disabled', ''"); 


) 


disable: function() { 
// 禁用 小 部 件 


$(this.element).removeAttr('disabled'!); 





)h 
refresh: function() ( 
// 刷新 小 部 件 
this. loadURL(); 
} 


D; 
// 小 部 件 定义 结束 
// 自动 初始 化 代码 


$(document).bind("pagecreate", function(event) ( 
// 找到 相应 的 data-role, 调用 dynamicimage 的 构造 器 
$ (event.target).find("img:jqmData (role-'dynamic-image')").dynamicimage(); 

















p»: 


) (jQuery)); 


Jr = 
10.2 HIHA 
有 不 少 很 酷 的 插件 ， 下 面 列举 了 一 些 在 日 常 项 目 中 最 实用 的 插件 。 


10.2.1 分 页 插件 


http://filamentgroup.com/lab/jquery_mobile_pagination_plugin 上 的 分 页 插件 (图 
10-2) 可 以 用 来 对 内 容 (比如 图 片 ) 进行 分 页 ， 它 在 屏幕 上 显示 左右 两 个 箭头 ， 用 
户 一 看 就 知道 可 以 通过 箭头 进行 前 后 翻 页 。 

用 户 翻 页 的 方式 包括 : 

。 点 击 浮动 在 屏幕 上 的 箭头 按钮 

。 使 用 设备 键盘 上 的 左右 箭头 按键 ; 

。 通过 手指 在 屏幕 上 左右 轻 扫 。 


下 载 插件 时 会 看 到 两 个 文件 : 








e jquery.mobile.pagination.css; 


e jquery.mobile.pagination.js, 
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10-2: 分 页 插件 把 一 组 图 片 分 成 了 多 个 页 面 进行 显示 


把 包含 这 两 个 文件 的 声明 加 入 到 neaa 元 素 中 之 后 ， 需 要 创建 一 个 data-role- 
"pagination" 的 ul 元 素 。 每 个 jQuery Mobile 页 面 都 应 该 包含 一 个 分 页 小 部 件 。 


每 个 分 页 小 部 件 都 包含 两 个 分 别 链 接 到 上 一 页 和 下 一 页 的 11 元 素 。1i 元 素 可 
以 用 两 个 类 来 修饰 : ui-pagination-prev 用 来 修饰 链 到 上 一 页 li Jt, ui- 
pagination-next 用 来 修饰 链 到 下 一 页 的 1i 元 素 。 
<ul data-role="pagination"> 
«li class-"ui-pagination-prev"»«a href="1.html">Prev</a></1i> 


«li class-"ui-pagination-next"»«a href-"3.html"»Next«/a»«/li» 
«/ul» 


10.2.2 Bartenderjü t 


这 个 插件 提供 了 一 个 类 似 于 iOS 应 用 程序 (图 10-3) 底部 的 标签 导航 ， 它 是 免费 
的 ， 可 以 从 http://www.stokkers.mobi/valuables/bartender.html 获得 。 
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All files can be found on Github, including 
icon-background templates and minified CSS. 


©) Quick Guide 

© Button Backgrounds 

Icon Backgrounds 

Button Text and Hover Gradient 
Icon Sprites 


Combo "retina-regular" or seperate ... 


Notifiers and Coming Soon 


« DER "0 














10-3; Bartender 插件 提供 了 iOS 风格 的 标签 导航 条 设计 


这 个 插件 只 有 一 个 CSS 文件 和 一 堆 图 片 ， 因 此 不 需要 用 到 aata-* 元 素 ， 只 有 一 些 


模板 代码 通常 都 放 在 固定 页 脚 内 的 navbar 部 件 里 ， 就 像 下 面 这 样 : 











«div data-role-"navbar" data-grid="d"> 
«ul class-"apple-navbar-ui comboSprite"- 
Scc 元 素 = 
«/ul» 
</div> 


这 个 播 件 也 支持 显示 计数 气泡 的 标签 ， 和 在 i0S 上 一 样 ， 在 11 元 素 中 使 用 <span 


class-"ui-li-count'»XXXX«/span» 即 可 。 
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10.2.3 DateBoxdü ff 
DateBox 提供 了 一 个 使 用 jQuery Mobile 语法 实现 的 日 期 选择 器 (图 10-4) 。 它 是 通 


un 


过 声明 data-role-"datebox" 的 «input type="date"> 元 素来 实现 的 ， 支 持 通 
过 众多 的 配置 项 进行 自 定 义 ， 它 的 标准 定义 是 这 样 的 : 























<input type="date" data-role="datebox"> 









“Carrier 会 2:03 PM N “Carrier 会 2:06 PM 73 











Some Date 
@ | Set Date 





June 2012 
Using a calendar is as simple as setting 
the 'mode' option to "calbox". We Th 





<label for-"mydate"»Some Date«/label 


<input name-"mydate" id-"mydate" typq 
data-options-'["mode": "calbox")" 











Changing the start of the 
week 


Some Date 
f 








可 2? M B < 2? M ® 











10-4: 使 用 DateBox 插件 可 以 创建 漂亮 的 日 期 选择 器 ， 就 算是 在 不 支持 HTML5 <input 
type-"date" /> 元 素 的 设备 上 也 能 使 用 


为 这 个 插件 提供 下 载 、 示 例 和 文档 的 官方 网 站 是 http://dev.jtsage.com/jQM-DateBox, 
其 中 提供 了 多 种 模式 的 日 期 选择 器 ， 它 们 的 相似 之 处 在 于 总 是 放 在 一 个 弹出 层 内 来 
显示 日 期 选择 (图 10-5) 。 这 个 插件 支持 的 模式 包括 : 


。 全 日 历 的 选择 器 ， 

e Android 模式 ， 为 年 月 日 的 设置 分 别提 供 一 个 数字 步 进 器 的 日 万 ，; 
。 Slider 模式 ， 为 年 月 日 的 设置 各 提供 一 个 水 平 请 动 条 ; 

。 Flip 模式 ， 为 年 月 日 的 设置 分 别提 供 一 个 垂直 的 请 动 条 ， 

。 时 间 模 式 ， 

。 持续 时 间 模 式 。 
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Set Date Set Date Set Date Set Date 


Sunday, June 17, 2012 Friday, September 14, 2012 


© June 2012 © Sunday, July 15, 2012 
2010 


28 
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r—— — — n v Set Date 
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2 Set Date 














10-5: DateBox 插件 提供 了 各 种 模式 的 日 历 选择 


10.2.4 Simple Dialog 插 件 


Simple Dialog 插件 用 jQuery Mobile 风格 的 窗口 末代 标准 的 window.alert、 
window.confirm, window.prompt 来 获得 用 户 的 输入 (图 10-6), 它 同样 是 免费 的 。 














4 QA E |devjtsage.com/jaM-SimpleDialog/demos/string.html 


jQueryMobile - SimpleDialog Demos 


What do you say? 


OK 


Cancel 











10-6: Simple Dialog 用 jQuery Mobile 风格 的 窗口 替代 标准 的 JavaScript 弹 窗 








这 个 插件 的 文档 和 下 载 可 以 在 http://dev.jtsage.com/jQM-SimpleDialog 找到 。 





要 使 用 Simple Dialog 插件 ， 需 要 下 载 插件 的 JS 文件 并 把 它 包含 到 head 元 素 中 ， 


或 者 使 用 CDN， 就 像 这 样 : 





<script src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile. 


simpledialog.min.js"></script> 
当 需 要 创建 alerc 框 时 ， 可 以 使 用 下 面 这 个 代码 段 : 


$ ("#button") .click (function() { 
$(this).simpledialog([ 
mode: 'bool', // 用 于 alert X confirm 弹 窗 
prompt: " 无 法 打开 这 个 文件 "， 
useModal: true, 
buttons: [ 
!'Ok': ( 
theme: "c", icon: "check" 








) 


Hs 
p: 


如 果 是 要 创建 一 个 confirmation 对 话 框 ， 可 以 这 样 : 





H 


$ ("#button") .click (function() { 
$(this).simpledialog([ 
mode: 'bool', 
prompt: " 要 删除 这 个 文件 吗 2"， 


useModal: true, 


buttons: [ 

'Yes': { 
theme: "c", icon: "delete", 
click: function() { 

// 删除 

} 

13 

'No': ( 
theme: "a", icon: "cancel" 


), 


p: 
p: 


最 后 ， 要 创建 prompt 提示 框 就 这 样 : 





$ ("#button") .click (function() { 
$(this).simpledialog([ 
mode: 'string', 
prompt: " 你 叫 什么 名 字 o, 
useModal: true, 
buttons: [ 
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'No': { 
theme: "c", icon: "delete", 
click: function() { 
alert ("Your name is " + $("fbutton").jqmData ("string"); 
} 
} 


p»: 
p»: 


10.2.5 Action Sheet 插 件 
Action Sheet 是 一 个 模 态 的 弹出 菜单 ， 也 是 一 个 从 i0S 原生 控件 上 获得 启发 的 插件 。 





我 们 可 以 在 https://github.com/hiroprotagonist/jquery.mobile.actionsheet 上 找到 这 个 
插件 ， 包 括 CSS 和 JavaScript 文件 。 


要 创建 一 个 Action Sheet， 需 要 一 个 触发 它 的 按钮 ， 这 是 一 个 data-role= 
"actionsheet" 的 a 元 素 。 点 击 后 ,会 打开 这 个 元 素 的 兄弟 节点 ， 或 者 另 一 个 id 
为 data-sheet 属性 指定 id 的 元 素 。 








3& E FHixT dtp. XUI T 4E jquery.mobile.actionsheet.js 和 jquery.mobile. 


-D actionsheet.css 添加 到 head 元 素 中 。 


这 个 元 素 里 面 多 半 包 含 jQuery Mobile 按钮 。 如 果 用 户 点 击 弹出 块 之 外 的 区 域 ， 它 
就 会 被 关闭 。 我 们 也 可 以 在 里 面 添 加 一 个 data-rel-"close" 的 按钮 ， 那 么 它 就 会 
执行 关闭 / 取消 的 功能 。 示 例 代 码 如 下 : 














«a data-role-"actionsheet" data-sheet-"share" data-icon="plus">Share</a> 


«div id-"share"- 
«a href-"facebook.html" data-role-"button"»Share in Facebook«/a» 
«a href-"twitter.html" data-role-"button"»Share in Twitter</a> 
«a href-"google.html" data-role-"button"»Share in Google+</a> 
«a data-rel-"close" data-role-"button"»Cancel«c/a» 

«/div» 


10.3 供 平 板 使 用 的 插件 


在 为 平板 电脑 开发 Web 应 用 时 ， 将 屏幕 分 成 两 列 而 不 是 像 标 准 jQuery Mobile 应 用 
那样 全 屏 展 示 是 一 个 很 实用 的 功能 。 这 就 是 为 什么 SplitView 和 MultiView 这 两 个 
插件 要 为 平板 应 用 提供 各 自 解决 方案 的 原因 。 











10.3.1  SplitViewtdi ft 


SplitView 插件 可 以 在 http://asyraf9.github.com/jquery-mobile 找到 ， 利 用 它 可 以 把 页 
面 分 成 两 块 区 域 ， 这 两 个 区 域 也 叫做 面板 。 





每 个 面板 都 是 一 个 jQuery Mobile 页 面 ， 包 含 页 头 、 内 容 区 和 页 尾 。SplitView 允许 
屏幕 在 横 屏 状态 下 同时 出 现 两 个 面板 (图 10-7)。 那 样 我 们 就 有 了 两 个 页 面 ， 通 常 
左边 的 是 菜单 ， 右 边 是 内 容 区 域 。 
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I'm first in the source order so I'm shown as the page. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consectetur, ligula quis convallis 
gravida, tortor odio mattis purus, a fringilla mauris velit eu nisi. Vivamus laoreet tincidunt diam, sit amet 
tristique purus lobortis ac. Etiam commodo placerat elit. In aliquam dapibus felis, molestie molestie 
purus scelerisque sit amet. Donec vitae varius arcu. Aliquam dapibus dolor magna, nec posuere felis. 
Nullam in suscipit massa. Duis nec nulla nec urna sollicitudin fringilla. Proin at rutrum mi. Maecenas 
vitae urna ante, ac gravida tortor. 


Vestibulum porta pretium nunc, at adipiscing tortor fringilla sit amet. Sed venenatis varius turpis, vel 
fringilla purus egestas in. Curabitur interdum mauris nec velit vehicula sed aliquam nulla convallis. Nulla 
id magna libero, sagittis fringilla metus. Suspendisse dapibus tincidunt tristique. Fusce interdum 
tincidunt tincidunt. Phasellus tempus fringilla augue eget tincidunt. Donec facilisis mauris ut metus 
eleifend eget scelerisque nulla sagittis. Ut vel elit non risus dapibus luctus. Pellentesque vel nibh tortor. 


Fusce a nisi at dolor rutrum tristique. Donec faucibus metus vitae lorem scelerisque malesuada 
scelerisque enim imperdiet. Aliquam in erat orci. Ut ultrices, erat eu luctus accumsan, lorem nibh cursus 
purus, in laoreet nisi tellus interdum sem. Nulla fringilla molestie lectus nec hendrerit. In in mollis tortor. 
Nunc lectus tortor, porttitor vitae viverra non, dignissim ac ligula. In tincidunt libero id turpis gravida 
iaculis rhoncus dolor aliquam. Vestibulum congue massa nec nibh sagittis tempor. Pellentesque 
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque quis urna 
arcu. Quisque feugiat ante id turpis ultrices vel imperdiet ipsum volutpat. Donec enim magna, pretium 
eu scelerisque ut, pretium placerat risus. 


Sed sed lacinia ante. Aenean non quam in ipsum pharetra condimentum. 


Donec turpis lacus, pharetra ac viverra sit amet, lobortis eu nisl. Cum sociis natoque penatibus et 

magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor dignissim orci ut feugiat. 

Praesent quis auctor purus. Suspendisse non elit accumsan mi pellentesque laoreet. Nullam et sapien 
sed nibh dictum tempor sit amet ut velit. Vestibulum varius ultricies lorem sed ultricies. Vestibulum 

auctor velit vitae ante eleifend eget bibendum metus rutrum. Nulla facilisis luctus mi laoreet rutrum. 

Nunc accumsan urna at elit nellentesarie ut venenatis lectis adiniscina [It et arceri urna Alinuam eras d 











图 10-7: 使 用 SplitView 插件 ， 就 可 以 创建 支持 同时 显示 多 个 页 面 (通常 情况 下 显示 为 菜单 
和 内 容 区 域 ) 的 平板 应 用 程序 


在 坚 屏 状态 下 ， 菜 单 面 板 隐 藏 在 左上 角 的 按钮 内 ， 点 击 后 才 会 以 弹出 菜单 的 形式 显 
示 出 来 (图 10-8) 
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Im first in the source order so I'm shown as the page. 


Lorom ipsum dolor sit amet, consectetur adipiscing elit. Pellontosque consectetur, ligula quis convallis 
gravida, tortor odio mattis purus, a fringilla mauris velit eu nisi. Vivamus lacreet tincidunt diam, sit amet 
tristique purus lobortis ac. Etiam commodo placerat eiit. In aliquam dapibus felis, molestie molestie 
purus scelerisque sit amet. Donec vitae varius arcu. Aliquam dapibus dolor magna, nec posuere felis. 
Nullam in suscipit massa. Duis nec nulla nec urna sollicitudin fringilla. Proin at rutrum mi. Maecenas 
vitae urna ante, ac gravida tortor. 


Vestibulum porta pretium nunc, at adipiscing tortor fringilla sit amet. Sed venenatis varius turpis, vel 
fringilla purus egestas in. Curabitur interdum mauris nec velit vehicula sed aliquam nulla convallis. Nulla 
id magna libero, sagittis fringilla metus. Suspendisse dapibus tincidunt tristique. Fusce interdum 
tincidunt incidunt. Phasellus tempus fringilla augue eget tincidunt. Donec facilisis mauris ut metus 
eleifend eget scelerisque nulla sagittis. Ut vel elit non risus dapibus luctus. Pellentesque vel nibh tortor. 


Fusce a nisi at dolor rutrum tristique. Donec faucibus metus vitae lorem scelerisque malesuada. 
scelerisque enim imperdiet. Aliquam in erat orci. Ut ultrices, erat eu luctus accumsan, lorem nibh cursus 
purus, in laoreet nisi tellus interdum sem. Nulla fringilla molestie lectus nec hendrerit. In in mollis tortor. 
Nunc lectus tortor, porttitor vitae viverra non, dignissim ac ligula. In tincidunt libero id turpis gravida 
iaculis rhoncus dolor aliquam. Vestibulum congue massa nec nibh sagittis tempor. Pellentesque 
habitant morbi tristiquo senectus et notus ot malesuada fames ac turpis ogostas. Quisque quis urna 
arcu. Quisque feugiat ante id turpis ultrices vel imperdiet ipsum volutpat. Donec enim magna, pretium 
eu scelerisque ut, pretium placerat risus. 


Sed sed lacinia ante. Aenean non quam in ipsum pharetra condimentum. 


Donec turpis lacus, pharetra ac viverra sit amet. lobortis eu nisl. Cum sociis natoque penatibus et 
magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor dignissim orci ut feugiat. 
Praesent quis auctor purus. Suspendisse non elit accumsan mi pellentesque laoreet. Nullam et sapien 
sed nibh dictum tempor sit amet ut velit. Vestibulum varius ultricies lorem sed ultricies. Vestibulum 
auctor volit vitae anto oleifond ogct bibendum metus rutrum. Nulla facilisis luctus mi laoroot rutrum. 
Nunc accumsan urna at elit pellentesque ut venenatis lectus adipiscing. Ut et arcu urna. Aliquam eros 
leo, ultricies vel porta nec, tempor sit amet leo. Quisque imperdiet facilisis orci ut malesuada. Nunc eget 
elit mauris. Mauris sed felis lectus. 


Duis purus som, condimentum eget posuero sed, vulputate non lorem. Cum sociis natoquo penatibus et 
magnis dis parturient montes, nascetur ridiculus mus. Cras risus urna, commodo quis interdum sit amet, 
elementum vitae lacus. Ut tempor hendrerit ante et facilisis. Vivamus elementum purus justo, ut auctor 
arcu. Cras varius rhoncus venenatis. Nulla dignissim velit a erat euismod pretium. In sed leo orci, et 
consectetur justo. Vestibulum ipsum urna. cursus in placerat in, malesuada eu odio. Nunc eget 
ullamcorper tortor. In commodo, turpis sed egestas egestas, dolor sem mattis nulla, eu semper lectus. 
metus at eros. Sed cursus nisl id risus fermentum quis aliquam odio pretium. Quisque justo eros, blandit 
gravida tristique eget, rhoncus in magna. Integer volutpat faucibus dolor, sit amet tempor metus ornare. 
consequat. Pellontosquo habitant morbi tristique sonectus et netus et malosuada famos ac turpis 

- amectas Nine et lamie anim eit amat rancanuat tirnic i 
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tetur adipiscing elit. Pellentesque consectetur, ligula quis convallis 
[fingilla mauris velit eu nisi. Vivamus laoreet tincidunt diam, sit amet 
modo placerat elit. In aliquam dapibus felis, molestie molestie 
Bar itae varius arcu. Aliquam dapibus dolor magna, nec posuere felis. 
[nulia nec urna sollicitudin fringilla. Proin at rutrum mi Maecenas 


Second level list 


dipiscing tortor fringilla sit amet. Sed venenatis varius turpis, vel 

[nterdum mauris nec velit vehicula sed aliquam nulla convallis. Nulla. 
is. Suspendisse dapibus tincidunt tristique. Fusce interdum 

ls fringilla augue eget tincidunt. Donec facilisis mauris ut metus 

lis. Ut vel elit non risus dapibus luctus. Pellentesque vel nibh tortor. 


Donec faucibus metus vitae lorem scelerisque malesuada 

in erat orci. Ut ultrices, erat eu luctus accumsan, lorem nibh cursus. 
sem. Nulla fringilla molestie lectus nec hendrerit. In in mollis tortor. 
erra non, dignissim ac ligula. In tincidunt libero id turpis gravida. 
bulum congue massa nec nibh sagittis tempor. Pellentesque 
netus et malosuada famos ac turpis ogostas. Quisque quis urna 
ultrices vel imperdiet ipsum volutpat. Donec enim magna, pretium 
isus. 


luam in ipsum pharetra condimentum. 


rra sit amet, lobortis eu nisl. Cum sociis natoque penatibus et 
Etur ridiculus mus. Curabitur porttitor dignissim orci ut feugiat. 

disse non elit accumsan mi pellentesque laoreet. Nullam et sapien 
jelit. Vestibulum varius ultricies lorem sed ultricies. Vestibulum. 
[bibendum motus rutrum. Nulla facilisis luctus mi laorcot rutrum. 
Isque ut venenatis lectus adipiscing. Ut et arcu urna. Aliquam eros 

[i amet leo. Quisque imperdiet facilisis orci ut malesuada. Nunc eget 


posuero sed, vulputate non lorem. Cum sociis natoquo penatibus ot 

btur ridiculus mus. Cras risus urna, commodo quis interdum sit amet, 

endrerit ante et facilisis. Vivamus elementum purus justo, ut auctor 

enema. Nulla dignissim velit a erat euismod pretium. In sed leo orci, et 
consectetur usto. Vestibulum Ipsum ura. cursus In placerat In, malesiada eu odo. Nunc eget 
ullamcorper tortor. In commodo, turpis sed egestas egestas, dolor sem mattis nulia, eu semper lectus. 
metus at eros. Sed cursus nis! id risus fermentum quis aliquam odio pretium. Quisque justo eros, blandit 
gravida tristique eget, rhoncus in magna. Integer volutpat faucibus dolor, sit amet tempor metus omare 
Consequat. Pllentesque habitant morbi tristique senectus ot netus et malosuada famos ac turpis 
anastas Nune et nrus anim cit amat rnneantiatttmnic i 











10-8: 旋转 平板 到 坚 屏 显示 状态 下 ，SplitView 和 MultiView 会 调整 双 栏 显示 变 为 只 显 


«body» 


主 内 容 区 ， 而 左 栏 会 隐藏 到 左上 角 以 弹出 菜单 的 方式 显示 
每 个 面板 都 有 一 个 data-id 属性 用 来 定义 面板 的 名 字 


«div data-role-"panel" data-id-"menu"- 


«div data-role-"page"- 


</div> 
</div> 


<div data-role="panel" data-id="main"> 


<div data-role="page"> 


</div> 
</div> 
</body> 


然后 ， 可 以 定义 链接 元 素 在 哪个 面板 中 加 载 。 
之 内 。 


举 个 例子 : 


«a href-'"demo.html" data-panel-"main"»Demos«/a» 
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， 它 可 以 使 链接 变 得 更 容易 : 


过 渡 的 动画 和 frame 一 样 显示 在 面板 


10.3.2 MultiView 插 件 


MultiView 和 SplitView 的 功能 差不多 ,但 是 实现 却 不 同 (图 10-9)。 它 也 有 定义 
data-role="panel" 的 元 素 ,， 但 是 和 page 元素 的 关系 却 是 子 节点 与 父 节 点 的 关系 。 








4 Mm 9h | www.stokkers. mobi/valuables/multiview/page2.html e |f 
x multiview plugin - page 2 T 


main section 


Menu Pages © Setup 


menuSub1-1 +context © Info 


menuSub1-2 This page is a multiview page containing 4 panels and 16 pages, which all were added to the DOM 


when loading the page (directly or from another JOM-page!). 


Main Pages 


Main Page 2 The main difference between regular JOM pages and multiview JQM pages is the use of panels 


instead of content sections. Four panel types are possible "main", "menu", "fullwidth" and "popover" 

Main Page 3 (any number). Panels are containers with nested JOM pages. The wrapper-page ensures normal 
JQM navigation between pages is possible with the whole multiview-page being added or removed 
to/from the DOM. 


To setup a multiview page specify a wrapper page and optional global header/footer, then add panels 
containing all nested pages. 


To navigate on and between panels, a data ge ij: lip" is required on all panel-links. This 
tells JOM to use panel-navigation (inside the per page) instead of regular navigation (between 
wrapper page and other JOM pages). Be careful not to target to az el, which eS the 
panel type, like "popover". Since there can be more than one popover on page. the data-target 
always needs to point to the data-id of the respective panel 


i " * * 


page3 














图 10-9: 使 用 MultiView 插件 ， 也 可 以 创建 各 面板 间 共 享 固定 的 页 脚 的 平板 风格 的 应 用 


http://www.stokkers. ce tnd se 0 html 上 有 这 个 插件 的 演示 ， 它 
改变 了 jQuery Mobile 常见 的 交互 方式 。 一 个 data-role="page" 的 元 素 (而 不 是 
内 容 区 域 )， 可 以 包含 最 多 四 个 面板 区 域 (data-role="panel"): 





。 主 面板 ， 
。 全 屏 面板 (可 选 ， 横 屏 时 可 用 ) ; 
。 弹出 面板 (可 选 ， 竖 屏 时 可 用 )。 


面板 的 类 型 由 qata-id 来 定义 ， 比 如 : data-id="menu"。 


每 个 面板 都 包含 它 自己 的 页 面 ， 因 此 会 存在 页 面授 套 的 情况 。 它 的 结构 是 : 页 面 > 
页 面 六 页 面 六 页 头 /内容 区 /页 脚 。 只 要 需要 ， 每 一 个 面板 可 以 包含 任意 多 的 页 面 ， 
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但 至 少 得 有 一 个 页 面具 有 属性 aaca-shows" first". 
使 用 data-target 属性 ， 可 以 定义 链接 在 哪里 打开 ， 它 可 以 是 : 


。 ZEME ( 移 除 所 有 面板 ) ; 
。 面板 加 载 (菜单 面板 或 者 主 面板 ) ; 
。 多 面板 加 载 〈 染 单 和 主 面板 同时 加 载 ) 。 


这 个 插件 的 文档 不 多 ,但 是 参考 在 线 演示 ， 要 想 搞 明白 它 并 不 是 很 困难 。 


10.4 兼容 的 jQuery UI 插件 


有 一 些 jQuery UI 的 插件 也 可 以 在 jQuery Mobile 应 用 中 使 用 ,但 由 于 这 些 
没有 遵循 jQuery Mobile 框架 的 规范 ， 因 此 不 能 使 用 aata-role 和 一 些 完 
JavaScript 代码 调用 提供 的 功能 


下 面 列 出 了 一 些 兼 容 的 jQuery UI 插件 。 











Photoswipe (http://photoswipe.com) : 支持 在 iOS、Android 和 BlackBerry 6+ 创 
建 照片 画廊 的 插件 。 


片 画 万 。 
jQuery UI Maps (http://code.google.com/p/jquery-ui-map) : 在 移动 Web 应 用 中 
集成 Google 地 图 的 插件 。 
MobiScroll (http://www.mobiscroll.com) : 使 用 步 进 器 或 者 轮 盘 的 方式 进行 时 间 
日 期 的 选择 。 


Diapo (http://www.pixedelic.com/plugins/diapo) : 有 很 棒 的 CSS 动画 效果 的 幻灯 
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第 11 章 


为 应 用 商店 打包 





有 人 说 ， 应 用 商店 代表 了 应 用 的 未 来 。 说 实话 ， 没 人 知道 未 来 的 应 用 发 布 方式 究 
竞 是 基于 应 用 商店 、 基 于 浏览 器 ， 还 是 两 者 混合 的 方式 。 使 用 HTML5 (特别 是 
jQuery Mobile) 的 绝妙 之 处 在 于 ， 我 们 既 可 以 基于 浏览 器 来 发 布 应 用 ， 也 可 以 打包 
成 原生 应 用 通过 应 用 商店 发 布 。 


因此 ， 如 果 想 通过 应 用 商店 来 发 布 应 用 ， 使 用 jQuery Mobile 来 开发 绝对 是 没有 问 
题 的 。 不 过 ， 要 做 到 这 一 点 ， 针 对 不 同 的 目标 平台 有 不 同 的 方式 。 


首先 要 明白 的 一 点 是 不 同 的 平台 需要 创建 不 同 的 软件 包 。 从 某 种 意义 上 来 说 ， 我 们 
需要 把 所 有 的 文件 (HTML, JavaScript, CSS 和 jQuery Mobile 框架 的 文件 ) 拷贝 
到 不 同 的 项 目 中 ， 然 后 创建 不 同 的 软件 包 。 
































Xa 














W3C 有 一 个 社区 工作 组 正在 起 草 用 于 应 用 发 布 的 打包 标准 ， 就 是 Native 
aa 


W 4, Web Apps， 它 的 官方 地 址 是 http://www.w3.org/community/native-web-apps/。 
、 4. 





把 Web 应 用 当 作 原生 应 用 来 打包 ， 应 用 可 以 调用 到 一 些 非 HTML5 的 API， 这 些 
API 包括 相机 、 联 系 人 列表 、 加 速度 传感器 API 


要 打包 应 用 到 商店 发 布 ， 可 以 选择 了 下 方式 。 


。 为 每 个 平台 创建 一 个 原生 应 用 项 目 ， 把 Web 应 用 的 文件 作为 本 地 资源 加 入 到 项 
目 中 ,用 Web View 组 件 绑 定 应 用 的 HTML 内 容 。 这 种 方式 有 时 被 叫做 混合 应 用 。 
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。 使 用 某 个 官方 的 Web 应 用 平台 , 这 时 往往 会 把 我 们 的 文件 打包 成 一 个 zip 压缩 包 。 
。 使 用 原生 应 用 编译 工具 ， 帮 助 我 们 为 各 个 平台 编译 相应 的 软件 包 。 








把 Web 应 用 编译 成 原生 软件 包 往 往 需要 掌握 各 平台 原生 应 用 代码 和 SDK 


JE 工具 的 专业 知识 。 
11.1 到 应 用 商店 去 发 布 


打包 应 用 的 第 一 步 是 明确 应 用 要 针对 什么 平台 在 哪个 应 用 商店 进行 发 布 。 


表 11-1 列举 了 可 以 用 来 发 布 应 用 的 商店 ， 我 们 需要 在 各 个 平台 上 都 创建 一 个 应 用 发 
布 账号 。 


表 11-1: 可 以 发 布 应 用 的 商店 列表 






































商 店 所 有 者 平 台 文件 格式 | 发 布 费 用 URL 
AppStore Apple iOS (iPhone, |ipa 每 年 99 美元 | http;//developer.apple.com/ 
iPod、iPad) programs/ios 
Android Market | Google Android apk 一 次 20 美元 | http://market.android.com/ 
publish 
AppWorld RIM BlackBerry | Smartphones/ cod/bar 免费 http://appworld.blackberry. 
PlayBook com/isvportal 
Nokia Store Nokia Symbian/N9 wgz/deb bar | 1 欧元 http://info.publish.nokia. 
com/ 
Amazon AppStore | Amazon Android/Kindle | apk 每 年 99 美元 | http://developer.amazon. 
Fire com/ 
MarketPlace Microsoft Windows Phone 每 年 90 美元 | http;//create.msdn.com/ 























针对 每 个 平台 ， 有 必要 根据 各 自 的 文档 检查 一 遍 各 个 应 用 商店 还 需要 提供 哪些 元 数 
据 ， 比如 : 


。 高 分 辩 率 的 图 标 (通常 都 是 512 x 512) ; 
。 应 用 描述 ， 

。 所 属 分 类 的 选择 ， 

。 每 个 平台 上 的 应 用 截图 ， 

。 发 布 一 兼容 设备 列表 ; 

。 发 布 -国家 和 语言 ; 

。 市 场 营 销 口 号 。 
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ma s 、 
11.2 自 定义 的 发 布 
某 些 平台 允许 我 们 通过 自己 的 Web 服务 器 发 布 应 用 ， 前 提 是 确保 MIME 类 型 配置 正 
fis Symbian 和 BlackBerry 设备 可 以 毫 无 障碍 地 接收 和 安装 任何 Web 应 用 。 


对 于 Android 和 Nokia N9 设备 ， 只 有 用 户 在 设置 中 允许 从 第 三 方 服务 器 进行 安装 
后 ， 才 能 够 从 我 们 的 服务 器 上 安装 应 用 。 


其 他 平台 ， 比 如 iOS 或 者 Windows Phone， 则 要 求 必须 从 官方 应 用 商店 进行 安装 。 








也 有 方法 可 以 对 设备 进行 配置 ， 使 得 它 可 以 不 通过 应 用 商店 直接 安装 应 用 ， 
Wa. 但 只 能 用 作 测试 ， 这 些 技术 不 在 本 书 的 讨论 范围 之 内 。 









































11.3 准备 打包 


有 必要 时 刻 提 醒 自 己 ， 我 们 是 在 用 jQuery Mobile 创建 原生 应 用 风格 的 Web 应 用 。 
此 ， 第 一 个 要 注意 的 就 是 浏览 器 工具 条 没有 了 。 举 个 例子 来 说 ， 界 面 上 不 再 默认 包含 
后 退 按钮 了 。 应 用 必须 要 在 页 头 创 建 一 个 后 退 按钮 ， 就 像 我 们 在 前 面 介绍 的 一 样 。 











C 编译 原生 应 用 时 ， 切 记 不 要 通过 CDN 的 方式 来 加 载 jQuery Mobile 文件 。 








第 二 个 值得 留心 的 问题 和 加 载 外 部 页 面 有 关 。 在 创建 应 用 时 ， 我们 可 以 加 载 本 地 的 
随 应 用 一 起 发 布 的 HTML 页 面 。 


如 果 需 要 从 一 个 外 部 的 URL 来 加 载 jQuery Mobile 的 文档 ， 我 们 可 以 在 mobileinit 
事件 的 处 理 程序 中 设置 $ .support .cors=true， 人 允许 框架 使 用 AJAX 访问 远程 服 


务 器 。 同 时 还 需要 设置 $.mobile.allowCrossDomainPage-true, 








jQuery Mobile 建议 关闭 pushstate， 以 避免 和 URL 管理 产生 冲突 。 


因此 ， 我 们 的 HTML 入 口 页 面 里 应 该 包含 这 样 一 段 代 码 : 


$(document).bind("mobileinit", function() ( 
$.support.cors - true; 
$.mobile.allowCrossDomainPages - true; 


$.mobile.pushState - false; 


D; 


如 果 应 用 是 面向 iOS 5.0 以 上 的 版 本 ， 那 就 可 以 在 固定 的 头 部 和 底部 使 用 原生 的 
定 工具 条 ， 这 样 能 获得 更 好 的 性 能 和 可 用 性 。 


Eg 
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e 在 打包 原生 应 用 时 ， 还 需要 准备 其 他 一 些 文件 ， 比 如 用 在 主屏 幕 或 者 应 用 
心 。 菜单 上 的 图 标 ， 应 用 启动 时 需要 展示 的 启动 图 片 。 一 些 平台 还 要 求 提 供 一 
个 应 用 可 以 访问 的 网 络 服 务 器 的 列表 。 


























11.4 使 用 PhoneGap 打 包 


PhoneGap 是 一 个 将 HTMLS 代码 编译 成 原生 应 用 的 开源 平台 ， 它 完全 兼容 jQuery 
Mobile, PhoneGap (之 前 也 叫做 Apache CallBack) 主要 由 Adobe 和 另外 几 家 颇具 
影响 力 的 公司 维护 。 完 整地 解释 PhoneGap 超出 了 本 书 的 范围 ， 这 里 只 是 简单 介绍 
些 入 门 知 识 。 





使 用 PhoneGap (http://phonegap.com)， 可 以 把 jQuery Mobile 应 用 编译 成 下 列 平台 
的 应 用 : 


* iOS; 

* Android; 

* webOS; 

* Symbian; 

* BlackBerry; 


* Windows Phone, 


下 载 PhoneGap 后 ， 可 以 得 到 一 个 ZIP 压缩 包 ， 包 含 了 所 有 平台 下 使 用 各 自 SDK 1T 
包 的 示例 ， 以 及 一 个 需要 包含 到 所 有 HTML 文件 中 去 的 JS 文件 。 直 到 PhoneGap 
1.2， 每 一 个 平台 都 还 需要 一 个 自己 的 JS 文件 。 这 个 文件 用 于 保持 各 平台 部 分 行为 
一 致 ， 并 加 强 API 兼容 性 。 





如 果 要 编译 iOS 应 用 ， 需 要 一 台 Mac 或 者 一 个 提供 Mac 环境 的 云 服务 ， 
-ey 在 http://macincloud.com 可 方便 地 租 到 一 个 Mac 设备 。 

















在 iOS 上 ，PhoneGap 提供 了 一 个 安装 方法 ， 可 以 把 PhoneGap 项 目 类 型 加 入 到 
Xcode 中 。Xcode 是 创建 原生 10S 应 用 的 官方 IDE。 表 11-2 列 出 了 各 平台 下 编译 应 
用 所 必须 安装 的 SDK。 








表 11-2: 编译 各 平台 原生 应 用 所 需要 用 到 的 SDK 和 IDE 




















SDK 设备 平台 桌面 平台 下 载 地 址 
Xcode iOS MacOS 通过 Mac AppStore 下 载 
ADT for Eclipse Android Win/Mac/Linux http://developer.android.com 
WebWorks SDK BlackBerry Win/Mac http:// blackberry.com/developers 
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SDK 设备 平台 桌面 平台 下 载 地 址 
VisualStudio for WP Windows Phone Win http://microsoft.com/visualstudio 
Nokia Web Tools for Symbian |Symbian Win/Mac http://developer.nokia.com 


如 果 要 为 各 个 平台 都 创建 一 个 项 目 ， 需 要 把 自己 的 文件 (HTML, JavaScript, CSS, 
图 片 等 ) 复制 到 每 个 PhoneGap 示例 项 目 对 应 的 目录 下 。 通 常 这 是 一 个 叫做 www 的 
目录 。 找 到 一 个 叫做 index.html 的 文件 ， 那 就 是 需要 用 我 们 自己 的 jQuery Mobile 应 
用 替换 的 文件 。 




















PhoneGap Build 


如 果 你 嫌 为 每 个 平台 使 用 各 自 的 SDK 创建 一 个 包 麻 烦 ，Adobe 倒是 提供 了 一 个 在 云 
端 编译 应 用 的 服务 〈 既 有 免费 的 方案 也 有 付费 的 方案 )， 了 叫做 PhoneGap Build, 'E 
的 地 址 是 http://build.phonegap.com, 





使 用 这 个 服务 ， 我 们 可 以 把 完整 版 的 jQuery Mobile 应 用 (包括 CSS, JavaScript 和 
EH) 和 一 个 遵循 W3C 小 部 件 规范 的 config.xml 文件 打 成 一 个 ZIP 压缩 包 上 传 ， 
PhoneGap Build 就 会 把 它 编译 成 下 列 平台 的 原生 软件 包 : 


e iOS; 

e Android; 

e webOS; 

* BlackBerry 智能 手机 ， 


* Symbian, 


在 写作 本 书 的 时 候 ，PhoneGap Build 还 不 支持 Windows Phone fll BlackBerry 平板 电 
脑 ， 但 应 该 很 快 就 会 支持 了 。 








对 于 iOS 和 BlackBerry， 我 们 需要 把 平台 发 布 程 序 提供 的 签名 私 钥 提 供给 


-Ee PhoneGap Build, 
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大 于 封面 





本 书 封面 上 的 动物 是 日 本 黑 貂 《属于 紫 貂 )， 主 要 生活 在 日 本 最 北部 的 北海 道 岛 上 ， 
是 生活 在 俄罗斯 、 蒙 十， 以 及 中 国 北方 针 叶 林 中 的 紫 貂 的 一 种 。 


墨 貂 柔软 、 光 请 的 貂 皮 很 值钱 。 自 中 世纪 以 来 ， 一 直 是 曾 皮 贸易 中 的 主要 商品 ， 深 
受 早 期 欧 训 皇 室 的 青睐 。 俄 罗斯 产 的 貂 皮 最 为 贵重 。 今 天 ， 这 些 貂 皮 既 有 来 自 商 业 
养殖 的 ， 也 有 来 自 野 生 捕 杀 的 。 


ARE EJ AO 厘米 ， 这 不 包括 10 到 20 厘米 长 的 尾巴 ， 体 重 900 到 2000 克 上 下 。 
它们 的 皮 有 从 浅 棕色 到 深 棕 色 的 过 渡 ， 而 且 还 带 有 浅 色 斑 点 。 日 本 的 这 一 种 腿 和 上 脚 
上 有 黑色 印记 。 

这 些 杂食 的 哺乳 动物 喜 异 上 暗 (一 般 黄 错时 分 活动 )， 它 们 吃 动物 、 乌 类 、 鱼 、 蛋 、 昆 
虫 和 植物 。 它 们 还 能 捕食 体型 比 自己 大 的 动物 ， 甚 至 包括 小 永 ， 有 时 候 也 吃 其 他 动 
物 剩 下 的 猎物 。 黑 貂 一 寞 生 三 个 幼 患 ， 一 般 怀 孕 一 个 月 ， 延 迟 着 床 八 个 月 〈 胚 胎 在 
此 期 间 处 于 休眠 状态 )。 有 时 候 ， 墨 貂 会 与 松 貂 异种 交配 ， 生 下 的 杂交 品种 叫 kidus 。 


本 书 封面 动物 原 载 于 Wood's Animate Creation, 
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Mobile Web Design & Development 





jQuery Mobile 即 学 即 用 


你 想 写 一 个 Web 应 用 ， 让 它 既 能 在 iPad 和 Kindle Fire 上， 也 能 在 
iPhone 和 Android 手 机 上 运行 吗 ? 这 本 介绍 jQuery Mobile 的 书 会 
告诉 你 怎么 做 。 通 过 一 系列 手把手 的 练习 ， 你 能 够 学 会 以 最 有 效 
的 方式 使 用 这 个 框架 的 各 种 界面 组 件 ， 构 建 定制 的 、 跨 平台 的 应 
用 。 即 使 没有 太 多 编程 经 验 ， 不 熟悉 jQuery 也 不 要 紧 ， 本 书 很 容易 
看 懂 。 


看 完 这 本 书 之 后 ， 你 就 会 知道 怎么 使 用 jQuery Mobile 和 语义 化 
HTML5 代 码 ， 创建 出 能 在 各 种 智能 手机 和 平板 电脑 上 运行 的 响应 
式 、 基 于 AJAX 的 界面 。 


m 理解 jQuery Mobile 与 HTML5、CSS3 以 及 JavaScript 的 
关系 


m 利用 UI 组 件 创建 表单 、 列 表 、 导 航 条 和 按钮 

m 使 用 JavaScript、AJAX 和 jQuery 核心 框架 创建 动态 内 容 
m 通过 主题 和 CSS3 完 全 定制 用 户 界面 

m 让 用 户 能 够 从 浏览 器 中 安装 应 用 并 离线 使 用 

m 打包 成 原生 应 用 并 通过 应 用 商店 发 售 


[n] te- 
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“ (jQuery Mobile 即 学 即 用 》 
通俗 易 懂 地 介绍 了 jQuery 
Mobile 框 架 ， 旨 在 帮 读 者 尽快 
成 为 一 名 高 效 开 发 者 。” 
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(http://appendto.com/) 
首席 执行 官 Mike Hostetler 


Maximiliano Firtman 是 移动 
开发 和 HTML5 技 术 专 家 。 身 
为 Web 和 移动 技术 教育 工作 
者 ， 他 既是 一 位 培训 师 ， 又 
是 一 位 演讲 家 ， 还 是 Adobe 
社区 专家 和 Programming 
the Mobile Web (O’Reilly) 
一 书 的 作者 。 另 外 ， 他 还 是 
ITMaster 专 业 培 训 机 构 (http:// 
www.itmaster.com.ar/) 的 


创始 人 。 
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欢迎 加 入 


图 灵 社 区 


前 沿 的 [T 类 电子 书 发 售 平台 

































































































































































E 子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同行 还 在 犹 图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 
了 豫 簿 得 的 时 候 ， 图 灵 社区 已 经 采取 实际 行动 拥抱 这 个 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 DRM-free 的 阅读 式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 以 较 
体验 : 在 线 阅读 和 PDF。 快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 

往 翻译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 




































































MARR, RCPBAUTHEDHIRUS. EARR 捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 


布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 片 (即使 Abus eique s 
[ : 提前 消灭 书稿 中 的 错误 ， 最 大 程度 地 保证 
有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进 的 质量 MN 















































































































































行 搜索 、 剪 贴 、 复 制 和 打印 。 





最 方便 的 开放 出 版 平台 最 直接 的 读者 交流 平台 


图 灵 社 区 向 读者 开放 在 线 写 作 功 能 ， 协 助 你 实现 自 在 图 灵 社区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 
版 和 开源 出 版 的 梦想 。 利 用 “合集 ”功能 ， 你 就 能 联 误 、 发 表 评论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 员 和 
合 二 三 好 友 共同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 
的 形式 提供 给 读者 。 (收费 形式 须 经 过 图 灵 社 区 立项 银子 。 

评审 。) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 
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的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 。 。 ”你 可 以 积极 参 忆 社区 经 常 开展 的 访谈 、 审 读 、 评 选 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 等 多 种 活动 ， 启 取 积 分 和 银子 ， 积 累 个 人 声望。 











图 灵 社区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 
社区 公布 。 如 果 你 有 意 翻 译 哪 本 图 书 ， 欢 迎 你 来 社区 
hi 请。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 
译 者 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 
需要 有 坚强 的 新 力 的 。 fp AA FAPA FA 
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